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山西 优 逸 客 创始 人 ， 技 术 发 起 人 ， 从 事 互联 网 行业 十 余 
年 ， 具 有 丰富 的 行业 经 验 和 管理 经 验 ， 秉 承 着 为 企业 培 
养 更 多 的 高 端 互 联网 设计 与 开发 人 才 ， 为 更 多 的 大 学 生 
搭建 高 薪 就 业 平台 而 创立 优 逸 客 UI 实 训 基地 。 开 拓 了 山 
西 UI 设计 与 前 端 开发 实 训 ，2016 年 带领 团队 走出 山西 ， 
在 西 实 开拓 UI 设计 实 训 基 地 ， 进 而 辐射 中 国 中 西部 区 
域 。 让 更 多 的 高 校 毕业 生 通 过 优 逸 客 的 实 训 成 为 合格 的 
互联 网 设计 与 开发 人 才 。 
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山西 优选 客 联合 创始 人 ， 技 术 发 起 人 ， 从 事 |T 互 联网 与 
移动 互联 网 24 年 ， 北 京 交 通 大 学 计算 机 应 用 专业 研究 
生 ， 被 多 所 大 学 聘 为 副教授 。 曾 担任 深圳 创 明科 技 有 限 
公司 CEO ， 从 事 对 欧美 服务 外 包 行 业 ， 主 持 多 项 Java EE 
企业 级 开发 ， 艇 入 式 物 联网 开发 。 以 及 Android 移 动 应 
用 开发 项 目 ， 目 前 专注 UVUE 和 前 端 开 发 ， 始 终 站 在 互 
联网 浪潮 之 里 ， 见 证 互联 网 与 移动 互联 网 的 发 展 。 
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从 事 品牌 服务 、IT 互 联网 与 移动 互联 网 行业 7 年 ， 曾 就 
职 于 百度 公司 ; 服务 过 正邦 设计 、 早 宕 设计 、 雨 青 儿 
童 插画 事务 所 以 及 等 多 家 4A 级 广告 公司 ; 涉及 领域 包括 : 
品牌 设计 、 用 户 体验 、 视 觉 设 计 等 方面 ; 连续 两 届 作 为 
站 酷 设 计 分 享 沙 龙 的 分 享 嘉宾 ， 在 行业 中 不 断 地 发 出 自 


己 的 声音 。 
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本 书 主要 针对 当前 移动 互联 网 行业 对 于 界面 设计 所 提出 的 新 要 求 提 
供 学 习 和 解决 方案 。 从 移动 互联 网 行业 出 发 ， 体 现 了 当前 以 移动 互联 为 
主 的 行业 特点 以 及 用 户 在 整个 产品 设计 与 研发 过 程 中 所 起 到 的 重要 作 
用 ， 在 基于 交互 以 及 产品 可 用 性 原则 的 基础 上 ， 为 各 位 读者 着 重 介绍 了 
在 移动 互联 的 影响 下 进行 界面 视觉 设计 的 具体 营造 和 表现 方式 。 
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夺 : 致 我 们 的 时 代 


当前 ， 我 们 正 处 于 最 伟大 的 时 代 ， 也 就 是 移动 互联 网 时 代 。 为 什么 这 么 说 呢 ? 原因 很 简 
单 ， 因 为 在 移动 互联 的 世界 中 ， 用 户 受到 了 空前 的 尊重 ,“ 用 户 至 上 ”的 原则 被 一 次 又 一 次 
地 推 上 了 高 潮 ， 在 这 个 时 代 的 生活 被 逐步 地 改变 与 优化 ， 人 们 的 衣 、 食 、 住 、 行 等 各 个 方面 
和 互联 网 的 联系 也 愈加 紧密 。 人 们 开始 发 现 ， 互 联网 已 经 逐渐 成 为 人 们 生活 不 可 或 缺 的 组 成 
部 分 ， 而 这 种 以 移动 设备 为 主导 的 移动 互联 网 时 代 将 长 时 间 持 续 下 去 ， 向 大 众生 活 的 各 个 细 
节 不 断 渗入 。 

回顾 人 类 发 展 的 历史 ， 人 类 文明 始终 在 不 断 进步 ， 无 论 是 方兴未艾 的 新 科技 革命 ， 还 是 
广泛 普及 的 互联 网 和 日 益 深 化 的 经 济 全 球 化 ， 以 及 区 域 经 济 的 一 体 化 ， 都 在 迅速 加 快 人 类 文 
明 的 前 进步 伐 ， 同 时 也 在 深刻 改变 着 人 类 的 生产 方式 、 生 活 方式 、 思 维 模式 。 

互联 网 是 人 类 智慧 的 伟大 结晶 ， 当 今世 界 经 济 、 政 治 、 文 化 和 社会 的 发 展 都 离 不 开 互 联 
网 ， 人 们 的 工作 和 生活 方式 也 随 着 互联 网 的 发 展 发 生 着 深刻 的 变化 “互联 网 +” 的 出 现 并 不 
是 对 传统 行业 的 颠覆 ， 而 是 将 互联 网 思维 与 传统 行业 的 发 展 相 结合 ， 以 互联 网 为 媒介 ， 让 传 
统 行业 在 其 中 的 联系 更 为 紧密 。 找 到 产业 全 面 转型 升级 的 切入 点 ， 促 使 传统 产业 焕发 出 新 的 
活力 与 生命 力 ， 走 出 一 条 互联 网 创新 驱动 高 效 发 展 的 新 道路 。 

我 们 的 团队 

本 书 的 作者 团队 一 一 优 和 逸 客 科 技 有 限 公 司 ， 成 立 于 2013 年 ， 总 部 位 于 山西 太原 ， 由 国 
内 顶尖 的 互联 网 技术 专家 共同 创立 。 优 逸 客 是 国内 互联 网 前 端 开发 实 训 行业 的 “ 拓 鞠 者 ” 
是 企业 级 产品 设计 “方案 提供 商 ” 是 中 国 UI 职业 教育 的 “知名 品牌 >” 公司 的 互联 网 技术 
实 训 体系 是 历时 一 年 的 深度 调研 并 结合 企业 对 人 才 实 际 需求 研发 而 成 ， 在 此 基础 上 配 以 完善 
的 职业 规划 体系 ， 规 范 的 人 才 培 养 流 程 和 标准 ， 从 而 培养 出 互联 网 高 端 技术 人 才 。 

经 过 3 年 发 展 ， 公 司 已 先后 在 北京 、 山 西 、 陕 西 等 区 域 建立 了 互联 网 人 才 实 训 基 地 ， 已 
为 我 国 培养 出 5000 余 名 互联 网 高 端 技 术 人 才 。 在 未 来 ， 公 司 将 继续 秉承 “专注 、 极 致 、 口 
碑 ” 的 文化 理念 ， 向 国内 顶尖 的 互联 网 人 才 培 训 公 司 的 方向 发 展 。 

关于 本 书 

本 书 主要 针对 当前 移动 互联 网 行业 对 于 界面 设计 所 提出 的 新 要 求 提 出 解决 方案 ， 从 行业 
出 发 ， 体 现 以 移动 互联 为 主 的 行业 特点 以 及 用 户 在 整个 产品 设计 与 研发 过 程 中 所 起 到 的 重要 
作用 。 

本 书 主要 是 以 移动 界面 来 进行 产品 视觉 的 展开 和 呈现 ， 并 且 基 于 交互 以 及 可 用 性 原则 的 
基础 上 ， 为 各 位 读者 着 重 介绍 在 移动 互联 的 影响 下 进行 界面 视觉 设计 的 一 些 具体 营造 和 表现 
方式 的 提炼 与 讲解 。 

本 书 从 信息 提炼 、 框 架 布局 、 风 格 确定 、 配 色 理 论 和 文字 排版 等 方面 逐一 诠释 了 页 面 设 
计 的 方法 ， 以 及 当前 视觉 设计 几 种 主流 的 设计 趋势 和 设计 风格 ， 也 包含 了 在 视觉 设计 工作 中 
总 结 的 工作 经 验 ， 能 够 为 初 入 设计 行业 的 从 业者 以 及 设计 爱好 者 在 进行 视觉 设计 工作 时 提供 
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较 大 的 帮助 ， 并 且 能 够 使 其 从 本 书 中 获得 更 为 全 面 的 视觉 表现 方法 和 页 面 设计 经 验 。 

对 于 设计 师 而 言 ， 其 实 有 相当 一 大 部 分 从 业者 会 进入 各 种 “互联 网 +” 的 行业 中 工作 。 
新 时 代 的 设计 师 不 但 要 夯实 自身 的 专业 技能 和 专业 素养 ， 同 时 也 要 明白 一 个 非常 重要 的 道 
理 ， 那 就 是 在 未 来 的 及 展 中 ， 设 计 师 将 不 止 做 一 件 事 情 ， 更 多 的 要 了 解 各 个 传统 行业 的 及 展 
模式 才能 够 和 所 服务 的 用 户 和 行业 站 在 同一 高 度 交 流 。 在 沟通 更 加 有 顺利 的 同时 ， 这 也 是 设计 
“ 同 理 心 ” 非 第 重要 的 体现 。 
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设计 是 帮助 人 类 解决 问题 的 重要 工具 和 方法 。 

那么 ， 对 于 设计 来 说 ， 只 有 适合 的 才 是 最 好 的 。 其 实 设计 在 任何 领域 都 是 普 过 存在 的 一 
种 处 理 方式 ， 只 要 是 适用 于 优化 和 解决 问题 的 过 程 都 会 统称 为 “设计 ”。 

那么 ， 设 计 师 这 样 一 个 职业 也 融 随 之 诞生 了 ， 很 多 宫 销 和 设计 方案 提供 商 的 出 现 ， 其 实 
就 是 在 满足 用 户 以 及 企业 的 各 种 需求 。 

对 于 设计 师 来 说 ， 其 解决 问题 的 最 终 目 的 是 恒久 不 变 的 ， 只 是 行业 与 时 代 不 断 改 变 设计 
的 表现 形式 和 技术 ， 从 平面 设计 a 到 现在 主流 的 移动 互联 时 代 均 是 如 此 ， 设 计 师 为 用 尸 解 决 问 
题 的 方法 往往 会 随 痢 具体 的 行业 而 具象 化 ， 但 其 本 质 是 不 变 的 。 所 以 ， 只 要 有 需要 ， 设 计 师 
束 水 远 和 存在 。 

设计 是 全 过 程 服 务 于 用 户 的 。 每 一 个 利益 相关 者 都 是 设计 师 需 要 考虑 的 元 素 ， 这 些 服务 
中 的 “ 触 点 ” 贯 罕 了 整个 服务 的 生态 链条 ， 而 这 个 设计 过 程 也 成 束 了 千 万 名 为 人 民 服 务 的 
“最 可 爱 的 人 ”。 

设计 师 的 灵魂 到 压 古 什么 ”归根 到 奈 还 是 设计 思维 的 积累 。 其 实 对 于 设计 来 说 ， 其 实施 
的 过 程 是 由 内 而 外 进行 发 散 的 ， 最 终 钞 地 的 还 是 对 于 人 性 的 研究 ， 对 于 欲望 和 需求 的 合理 转 
化 与 满足 。 以 互联 网 界面 设计 为 例 ， 从 “人 性 的 设计 ”到 “ 视 作 的 设计 >”， 其 理解 是 不 一 样 
的 。 一 个 从 抽象 的 需求 到 具象 产品 落地 的 全 过 程 ， 产 品 中 每 一 个 控件 的 位 置 ， 每 一 笔 色彩 的 
描绘 ， 无 颖 都 是 对 用 户 需求 不 断 满 足 的 过 程 。 

设计 并 不 是 无 中 生 有 的 ， 它 来 源 于 非 显 性 的 思维 层面 ， 最 初 本 是 无 形 和 抽象 的 ， 人 脑 提 
取出 事物 最 真实 的 、 最 重要 的 、 节 上 共 代 表 的 内 容 特征 与 功能 需求 ， 再 通过 显 性 的 方式 来 进行 
具象 的 表现 ， 就 如 用 最 初 的 用 户 调研 一 样 ， 需 要 明确 用 户 的 家 求 和 想法 ， 才 可 以 主导 后 期 的 
一 切 设 计 行 为 ， 并 且 你 持 其 方 同 的 正确 性 。 所 以 ， 敏 锐 地 发 现 需 求 和 问题 是 极其 重要 有 的 。 

好 的 问题 经 过 思考 之 后 往往 会 得 出 优质 的 结论 和 管 案 ， 所 以 设计 师 想 要 快速 准确 地 得 出 
解决 问题 的 方法 ， 竺 会 去 发 现 一 个 好 问题 也 是 至 关 重 要 的。 设计 的 过 程 更 多 还 是 内 心 的 碰 
撞 ， 而 不 是 单纯 徘 各 种 所 请 的 技法 去 修饰 与 解决 ， 视 和 觉 只 是 最 表象 的 部 分 。 

这 就 是 设计 师 “ 用 心 看 ”与 “用 眼看 ”的 差距 ， 也 就 体现 出 了 “用 心 做 ”和 “用 手 做 ”的 区 
别 。 所 以 “心眼 合 一 ” 才 是 设计 痢 产 出 好 作品 的 根本 基石 ， 也 是 划分 设计 师 层次 的 重要 分 水 崔 。 

在 “ 走 心 ”的 基础 之 上 方 可 更 好 地 运用 抽象 中 维和 设计 思维 去 分 析 、 去 优化 ， 从 而 更 深 
刻 地 理解 设计 ， 目 然 驾驭 设计 也 融 不 是 空话 了 。 设 计 的 过 程 其 实 束 是 在 不 断 地 思考 与 心灵 的 
人 碰 揪 当中 将 抽象 不 断 具 象 的 过 程 。“ 心 ”对 于 设计 者 来 讲 ， 往 往 才 是 其 真正 的 “ 魂 "。 而 每 当 
一 提 到 “ 心 ” 章 要 的 还 是 设计 者 所 要 具备 的 “ 同 理 心 *， 其实 束 古 要 充分 地 站 在 用 户 的 角 友 
去 思考 问题 ， 看 竺 事物 ， 因 为 对 于 同样 一 个 事物 ， 不 同 的 人 和 群 看 竺 其 的 眼花 和 角度 会 有 很 大 
区 别 。 所 以 ， 对 于 设计 首先 要 解决 的 是 设计 与 被 设计 人 和 群 和 事物 的 同化 ， 甚 至 还 要 考虑 到 更 
多 的 边缘 人 群 ， 这 样 才 是 设计 工作 正确 的 开展 方式 。 

对 于 用 户 体 验 来 说 ， 让 用 户 在 使 用 产品 过 程 中 能 够 切实 感受 到 产品 能 解决 他 们 的 实际 问 


V 
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如 ， 或 产品 能 让 问题 更 容易 被 解决 ， 并 因此 留 下 深刻 的 印象 和 极 好 的 主观 感受 ， 那 么 这 束 是 
一 球 “ 好 产品 ”。 

此 时 ， 这 已 不 仅仅 是 一 球 单 纯 的 产品 ， 而 是 贯穿 整个 用 户 体 验 的 “生态 链条 ”。 让 用 户 
由 产品 、 服 务 所 引出 的 物质 与 情感 中 所 包含 的 亲眼 所 见 、 所 得 、 所 接触 、 所 有 交流、 所 感受 都 
能 够 达到 同步 的 综合 体验 。 

对 于 视 沉 设计 ， 更 需要 根据 用 户 的 特点 和 行业 的 特征 去 完成 视觉 设计 。 对 于 视觉 设计 师 
来 说 ， 满 足 与 塑造 用 户 界面 更 多 的 元 感 其 实 来 源 于 平时 不 断 的 观察 与 积 款 。 

当然 ， 视 觉 设计 的 灵感 也 出 自 于 日 名 生活 中 对 细节 的 敏锐 捕捉 和 对 美感 塑造 的 不 断 深 化 
与 提炼 ， 这 也 是 编写 本 书 的 主要 目的 之 一 。 

所 以 ， 设 计 仍 在 路 上 ， 这 一 路 的 收获 与 接触 正 是 用 户 与 产品 最 终 的 诉求 和 互补 。 每 一 个 设计 
师 都 询 望 产品 不 单单 是 可 用 ， 更 重要 的 是 易 用 ， 甚 全 是 在 各 方面 都 能 够 打动 用 户 的 好 产品 。 

设计 师 根据 需求 的 变化 和 深入 ， 不 断 地 打磨 出 最 好 、 最 适用 的 产品 ， 为 用 户 切 切实 实 解 
决 回 题 ， 做 一 个 真正 为 人 民 服 务 的 人 ， 这 便 是 我 们 从 事 设计 的 初 囊 ， 也 布 望 能 够 从 本 书 当 中 
将 团队 的 态度 和 理念 传递 给 各 位 ， 为 移动 互联 ， 为 设计 页 献 目 己 的 一 份 努 力 。 

为 “最 可 爱 的 人 ”致敬 

本 书 的 编写 过 程 是 基于 团队 的 不 懈 努 力 以 及 长 期 从 业经 验 的 积累 而 完成 的 ， 布 望 本 书 能 
够 帮助 各 位 读者 、 设 计 从 业者 和 设计 爱好 者 。 在 这 里 要 感谢 所 有 帮助 编写 本 书 的 人 们 ， 没 有 
他 们 的 辛勤 付出 和 出 于 对 设计 最 本 质 的 热爱 ， 就 不 能 完成 这 样 一 件 意 义 非 几 的 事情 。 

首先 要 感谢 优 逸 客 公司 创始 人 优 逸 客 科技 有 限 公司 张 宏 师 总 经 理 以 及 创始 人 兼 实 训 总 监 
严 武 车 (Kevin〉 老师 ， 张 老师 和 严 老 师 蜗 瞻 远 瞩 、 严 齐 细 心 ， 在 本 书 的 编写 过 程 中 所 出 了 
很 多 宝 叶 的 意见 和 建议 ， 也 对 本 书 的 宏观 内 容 框 架 给 予 了 非常 有 力 的 指导 和 凌 和 全， 并 为 整个 
编著 团队 提供 了 非常 宝贵 与 充 是 的 支持 以 及 极 大 的 信任 。 

其 次 要 感谢 优 逸 客 公司 实 训 部 设计 总 监 刘 钊 老师 的 具体 指导 和 规划 ， 他 在 本 书 的 编写 过 
程 中 负责 书籍 内 容 的 科 选 和 把 控 ， 为 书籍 的 编著 提供 了 大 量 关 于 设计 技 渤 、 设 计 师 职业 妈 展 
经 验 以 及 关于 用 户 体验 、 视 党 界面 等 资料 、 参 考 文 档 和 项 目 作 品 ， 并 色目 参与 本 书 的 编写 。 

还 要 感谢 优 和 逸 客 UI 设计 以 及 用 户 体 验 设计 的 学 员 们 为 本 书 提供 了 宝 喧 的 项 目 资料 以 
及 GUI 界面 作品 ， 已 就业 的 学员 也 为 本 书 的 编写 提供 了 来 日 于 行业 友 展 的 宝 吐 意见。 

最 后 再 介绍 一 下 优 逸 客 实 训 与 实施 发 展 部 UI 设计 组 中 参与 编写 的 小 伙伴 们 。 他 们 分 
别 是 : 优 逸 客 软件 技法 实施 组 组 长 理 飞 及， 优 逸 客 星 级 布道 师 李 可 ， 优 和 逸 客 星 级 布道 师 
张 际 ， 优 人 逸 客 星 级 布道 师 杨 飞 以 及 星 级 布道 师 张 琳 云 (排名 不 分 先后 )。 其 中 ,岳飞 飞 老 
师 主要 负责 互联 网 视觉 界面 表现 软件 介绍 与 学 习 部 分 的 内 容 编写 ;， 李 可 老师 主要 负责 平面 
视觉 表现 技法 部 分 的 内 容 编 号 ， 张 凤 老 师 主 要 负责 安里 系统 的 整理 以 及 原生 安 时 系统 设计 
语言 的 介绍 与 实施 等 内 容 的 编写 ; 杨 飞 老师 主要 负责 游戏 UI 相关 内 容 的 编写 ; 张 琳 云 老 
师 主要 负责 本 书籍 封面 视觉 效果 的 设计 和 表现 。 

鉴于 作者 水 平 有 限 ， 丝 漏 之 处 在 所 难免 ， 层 请 广大 读者 批评 指正 。 
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移动 互联 时 代 到 来 


1.1 移动 互联 时 代 的 UI 设计 
1.2 HTMLS5 
1.3 移动 设备 的 特点 


移动 界面 设计 


造 的 风 癌 标 


1.1.1 一 个 伟大 的 时 代 一 一 移动 互联 


科学 技术 的 发 展 不 断 增 强 和 提高 着 人 类 对 世界 的 认识 和 改造 的 能 力 。 科 学 技术 以 其 独 有 
的 魅力 推动 厦 人 们 前 进 ， 它 对 社会 各 个 方面 的 发 展 已 经 产生 了 强烈 而 深刻 的 影响 。 

20 世纪 40 年 代 中 期 ， 也 就 是 1946 年 ， 美国 宾夕法尼亚 大 学 电工 系 为 美国 陆军 车 械 部 
阿 伯 丁 弹道 研究 实验 室 研制 了 一 台 用 于 炮弹 弹道 轨迹 计算 的 “电子 数值 积分 计算 机 ”。 这 是 
全 球 第 一 台 计 算 机 ， 它 的 问世 标记 着 计算 机 时 代 从 此 拉 开 序 秦 。 

随 看 第 一 代 计 算 机 的 诞生 ， 计 算 机 科学 已 成 为 一 门 发 展 快 、 滩 透 性 强 、 影 响 深 远 的 学 
科 ， 计 算 机 产业 已 在 世界 范围 内 发 展 成 为 具有 战略 意义 的 产业 。 随 着 计算 机 产业 的 蓬 动 发 
展 ， 互 联网 这 一 新 兴 产 业 也 迅速 发 展 起 来 ， 并 且 不 断 深 入 人 们 的 生活 。 

当前 ， 人 全球 互联 网 用 户 数 已 超 30 亿 ， 互 联网 全 球 渗 透 率 达到 42%。CNNIC 统计 ， 截 至 
2016 年 6 月 ， 我国 网 民 规模 达到 7.1 亿 ， 其 中 手机 网 民 规 模 达 6.56 亿 ， 手 机 在 上 网 设备 中 已 
占据 主导 地 位 。 移 动 设 备 上 网 的 便捷 性 ， 降 低 了 互联 网 的 使 用 门 朴 ， 移 动 互 联网 应 用 服务 不 断 
丰 诗 ， 与 用 户 的 工作 、 生 活 、 消 费 、 娱 乐 需 求 紧 黎 贴 合 ， 推 动 了 了 PC 网 民 持 续 快 速 问 移动 端 
转移 。 

互联 网 时 代 ， 只 有 将 互联 网 与 实体 经 济 深 上 度 融 合 才能 够 实现 更 大 范围 的 友 展 与 共享 。 随 
者 “互联 网 +” 国 家 战略 的 进一步 推进 ， 当 电 商 、 人 体育、 金融 、 医 疗 、 教 育 等 各 行 各 业 都 与 
互联 网 紧密 结合 ， 传 统 企 业 在 进行 产业 结构 调整 。 随 着 各 行 各 业 纷 纷 互联 网 化 ， 互 联网 与 实 
体 经 济 找到 了 优势 互补 的 掉 合 点 ， 并 引发 全 行业 的 广泛 创新 和 变革 。 

近年 来 随 看 智能 手机 和 移动 互联 网 的 普及 ， 大 数据 和 云 计 算 的 兴起 和 应 用 ， 今 天 这 个 时 
代 是 互联 网 的 大 时 代 ， 同 时 也 是 设计 的 大 时 代 。 回 首 过 去 的 几 年 ， 随 着 手机 市 场 的 巨变 ， 我 
们 可 以 感同身受 的 发 现 ，iOS 系统 、 安 早 系 统 以 及 Windows Phone 已 经 快速 抢占 和 瓜分 了 话 
基 亚 以 及 塞 班 系 统 的 市 场 份额 ， 开 启 了 由 智能 手机 以 及 i0S， 安 时 以 及 Windows Phone 为 主 
导 的 移动 互联 时 代 。 

人 们 可 以 看 到 从 平 果 、 谷 歌 到 微软 再 到 国内 的 互联 网 巨头 BAT 百度 、 阿 里 巴巴 、 腾 
讯 )， 这 近 几 年 的 发 展 和 变化 ， 几 乎 都 是 在 围绕 移动 互联 网 而 发 生 的 。 它 所 代表 的 一 股 以 移 
动 互联 和 智能 设备 为 背景 的 新 技术 和 全 新 的 疝 业 模式 以 及 创新 创业 浪潮 ， 为 即将 到 来 的 新 时 
代 开 辟 了 一 个 无 可 估量 的 蓝海 市 场 ， 在 其 影响 下 的 技术 、 产 品 、 创 业 、 人 才 均 是 如 此 。 


1.1.2 互联 网 思维 


人 类 的 社会 生活 都 是 有 规律 的 ， 想 要 对 其 有 更 透 彻 的 理解 ， 束 必须 分 析 其 中 的 规律 。 互 联 
网 的 到 来 是 这 个 时 代 的 必然 ， 互 联网 的 蓬 肠 发 展 更 是 时 代 的 特命 。 虽 然 有 着 索 杂 多 样 的 外 在 表 
现形 式 ， 但 是 左右 其 发 展 的 ， 是 运行 在 其 中 的 种 种 规律 ， 下 来 就 为 大 家 介绍 一 些 主要 的 互联 网 
思维 以 及 规律 。 
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移动 互联 时 代 到 来 

1. 摩尔 定律 

摩尔 定律 : 18 个 月 ， 计 算 机 的 性 能 会 翻 一 番 ; 或 者 说 相同 性 能 的 计算 机 等 IT 产品 ， 
18 个 月 价钱 会 降 一 半 。 

当然 在 当今 社会 往往 不 到 18 个 月 就 会 出 现 新 的 产品 ， 性 能 会 翻 一 番 ， 价 格 就 会 降低 。 
所 以 互联 网 里 所 有 的 东西 必须 要 快 ， 互 联网 思维 也 好 ， 互 联网 企业 也 好 ， 要 快速 地 响应 ， 否 
则 就 面临 淘汰 。 

2. 安 迪 比尔 定律 

安 迪 比尔 定律 是 对 开 产 业 中 软件 和 硬件 升级 换代 关系 的 一 个 概括。 原 话 是 “Andy gives， 
Bill takes away.”( 安 迪 提 供 什 么 ， 比 尔 拿 走 什 么 。) 安 迪 指 英 特 尔 前 CEO 安 迪 。 格 鲁 夫 ， 
比尔 指 微软 前 CEO 比尔 盖 次 ， 这 人 句 话 的 意思 是 : 硬件 提高 的 性 能 ， 很 快 就 被 软件 消耗 
Pj 

比如 计算 机 的 CPU 即使 从 酷 窒 i5 升级 到 酶 害 17， 但 是 开机 速度 也 没有 大 幅 提 升 。 处 理 
器 的 速度 已 经 翻 一 番 ， 计 算 机 内 存 和 硬盘 的 容量 以 更 快 的 速度 在 增长 。 但 是 ， 微 软 的 
Windows 操作 系统 等 应 用 软件 系统 占用 资源 越 来 越 多 ， 也 越 做 越 大 。 

3. 反 摩 尔 定律 

反 摩 尔 定 律 是 谷歌 前 CEO 埃 里 元 * 施 密 特 提出 的 : 如 果 你 反 过 来 看 摩尔 定律 ， 一 个 互联 
网 公司 如 果 今 天 和 18 个 月 前 卖 抒 同 样 多 同样 的 产品 ， 它 的 营业 额 融 要 降 一 半 。 

所 以 说 互联 网 公司 每 年 都 要 发 布 新 产品 ， 如 末 没 有 发 布 新 的 产品 ， 依 旧 有 卖 原来 的 产品 ， 
营业 和 额 束 要 降 一 半 。 对 于 所 有 的 互联 网 公司 来 讲 ， 这 都 是 非常 可 怕 的 ， 因 为 花费 了 同样 的 劳 
动 ， 却 只 得 到 以 前 一 半 的 收入 。 反 摩尔 定律 台 着 所有 的 互联 网 公司 必须 赶 上 摩尔 定律 的 
速度 。 

4. 基因 决定 定律 

在 菜 一 领域 特别 成 功 的 大 公司 一 定 已 经 被 优化 得 非常 适应 这 个 市 场 ， 它 的 企业 文化 、 做 
事 方 式 、 商 业 模 式 、 市 场 定位 等 已 经 适应 传统 市 场 。 这 会 使 其 获得 成 功 的 内 在 因 系 渐 渐 地 、 
深 深 地 植 入 公司 ， 可 以 说 成 了 这 家 公司 的 基因 。 


1.1.3 ”移动 互联 时 代 的 新 要 求 


本 书 中 所 介绍 的 UI 设计 束 诞 生 在 这 样 的 背景 下 。 本 书 将 针对 于 UI 设计 这 几 年 的 友 展 为 
移动 互联 从 业者 ， 尤 其 是 视觉 设计 师 们 提供 一 个 明确 的 搁 能 提升 以 及 职业 友 展 的 指导 。 司 
时 ， 也 很 采 邓 将 作者 团队 以 及 个 人 的 工作 经 验 以 技能 演练 和 项 目 实 施 的 方式 介绍 给 各 位 读者 
朋友 。 

以 行业 为 背景 ， 以 项 目 为 驱动 是 编写 本 书 的 源 果 和 最 初 的 动力 ， 也 希望 能 和 各 位 从 业者 
一 起 为 行业 做 一 些 有 意义 的 事情 。 

对 于 UI 设计 来 说 ， 很 多 从 业者 最 初 是 通过 视觉 设计 师 进 入 到 这 个 行业 的 ， 前 里 多 数 是 
来 目 于 平面 设计 、 网 页 设计 或 者 产品 设计 等 职位 。 移 动 互联 的 出 现 让 大 家 走 到 了 一 起 ， 视 筑 
设计 在 整个 UI 设计 行业 架构 中 扮 党 痢 重 要 的 角色 ， 也 是 产品 用 户 体 验 的 一 部 分 。 
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那么 ， 随 着 移动 互联 的 发 展 我 们 可 以 发 现 ，UI 设计 已 经 从 之 前 的 诞生 、 摸 索 。 火 热 其 
至 泡沫 ， 开 始 逐 步 趋 于 理性 。 随 看 移动 互联 行业 越 来 越 消 晰 化 ， 互 联网 企业 对 于 行业 的 理解 
也 越 来 越 清 晰 ， 同 时 对 于 互联 网 从 业者 的 有 要求 也 变 得 更 局 了 。 对 于 视觉 设计 师 来 讲 ， 其 职业 
发 展 的 瓶颈 已 经 日 渐 明 显 ， 行 业 需要 更 多 复合 型 人 才 。 所 以 再 没有 一 个 设计 师 是 只 做 一 件 事 
情 ， 现 在 需要 设计 师 在 做 好 视觉 设计 的 前 担 下 ， 有 只 备 产品 所 需要 的 设计 思维 ， 能 够 让 所 参与 
的 项 目 和 产品 切实 的 提升 用 户 使 用 后 的 主观 感受 及 用 户 体验 。 其 实 融 是 要 求 设计 师 能 够 和 服 
务 的 用 户 站 在 同一 个 平 侣 和 角度 进行 对 话 ， 需 要 设计 从 业者 可 以 放宽 眼界 ， 对 生活 保持 创意 的 
洞察 、 思 考 与 不 断 的 实践 。 


1.1.4 移动 互联 时 代 的 特 扣 


互联 网 媒介 有 别 于 传统 媒介 最 大 的 区 别 束 在 于 其 强大 的 交互 性 、 个 性 化 和 传播 快 的 
特点 。 

1. 关于 “个 性 化 ” 

可 以 说 个 性 化 是 移动 互联 这 给 用 户 最 大 的 改变 之 一 ， 越 来 越 多 的 产品 开始 针对 用 户 的 需 
求 和 使 用 记录 推荐 匹配 度 极 高 的 信息 来 增加 用 户 体 验 和 产品 的 转化 率 ， 这 也 可 以 让 用 户 感 到 
“被 尊重 ”而 获得 满足 感 。 

例如 Apple Music 的 体验 (图 1-1)，Apple Music 会 在 用 户 初 次 使 用 时 将 歌曲 流派 、 地 
点 以 及 歌手 做 为 调研 的 选项 供用 户 选择 。 用 户 只 需 点 击 红 色 圆 形 区 域 即 可 实现 选择 ， 那 么 用 
户 在 进入 应 用 时 ， 就 可 以 看 到 根据 用 户 的 选择 而 专门 推送 的 首 乐 及 资讯 。 


1-1 


这 种 思维 方式 已 成 为 现在 手机 应 用 一 个 典型 的 趋势 ， 包 括 购物 、 社 交 、 招 聘 等 应 用 均 具 
备 这 样 的 特 抬 。 图 1-2 中 所 展示 的 便 是 作者 团队 在 设计 有 关 音 乐 和 运动 教程 推荐 APP 时 ， 
运用 互联 网 个 性 化 思维 设计 的 用 户 需求 调研 页 面 的 视觉 效果 。 
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2. 关于 “传播 快 ” 

利用 互联 网 传播 快 的 特点 进行 产品 的 推广 以 增加 产品 的 上 曝光 度 及 下 载 量 ， 这 种 模式 已 经 
成 为 典型 的 产品 运营 以 及 推广 方式 。 和 直播 的 加 入 ， 网 络 热 词 的 快速 传播 以 及 HS 广告 的 流行 
均 是 基于 这 个 特点 而 展开 。 

当 用 户 使 用 产品 过 程 中 过 到 注册 成 功 、 区 易 成 功 、 局 取 交 励 等 天 键 操 作 时 ， 通 第 都 会 收 
到 系统 肥 来 的 分 至 至 朋友 图 或 者 各 种 社交 平台 的 弹 窗 提示 ， 在 增加 趣味 性 的 同时 ， 用 目 喘 的 
社区 资源 获取 产品 更 大 的 曝光 度 ， 也 惑 是 所 谓 的 “和 内容 运 营 ” 方 式 〈 疼 1-3)。 
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1.1.3 ”新 时 代 的 开设 计 


在 移动 互联 时 代 ，UI 设计 也 存在 很 多 的 理解 和 定义 ， 这 里 结合 官方 定义 和 作者 团队 的 
经 验 积 累 来 介绍 UI 的 组 成 。 

来 自 于 官方 的 基本 定义 ，UI 即 User Interface 用 户 界 面 的 简称 。UI 设计 泛 指 对 软件 以 
及 产品 的 人 机 交互 体验 、 操 作 逻 辑 、 界 面 美观 的 整体 设计 ， 在 这 里 所 指 的 产品 就 是 移动 端 
APP。 而 狭义 上 UI 就 是 指 用 户 界 面 ， 也 就 是 界面 设计 。 所 以 ，UI 设计 可 以 分 为 以 下 几 个 
部 分 。 

1. 美观 的 视觉 表面 设计 

如 条 把 产品 看 成 一 个 人 的 话 ， 视 觉 更 像 是 外 表 。 视 觉 设 计 对 于 设计 师 来 说 ， 主 要 是 对 产品 
的 用 户 界 面 进行 的 研究 ， 实 际 上 视 沉 设计 师 已 经 不 再 是 单纯 只 做 视 党 表现 的 所 谓 “ 美 工 ”， 而 
是 要 在 了 解 产 品 的 功能 、 交 互 流程 、 ee an ee th th 

视觉 设计 是 整个 产品 设计 过 程 中 最 终 的 视觉 表现 ， 其 范围 主要 包括 基于 产品 的 低 保 真 效 
果 图 和 蜗 保 真 视 芝 效果 图 以 及 界面 跳 转 和 产品 交互 流程 所 产生 的 动 效 。 当 然 ， 还 包括 与 工程 
师 进 行 项 目 对 接 的 流程 ， 包 括 标注 、 切 图 、 适 配 和 命名 等 工作 。 图 1-4 中 展示 的 便 是 按照 产 
品 所 服务 的 用 户 人 群 特点 、 行 业 特 征 以 及 企业 形象 而 设计 的 手机 应 用 界面 的 视 党 效果 。 


2. 流畅 易 用 便捷 的 交互 设计 
交互 设计 ， 研 究 人 与 界面 的 互动 关系 ， 其 实 也 就 是 用 户 和 产品 进行 交流 与 互动 的 过 程 。 
当 手 指点 击 或 者 手势 已 成 为 现在 人 们 与 产品 互动 的 传统 方式 之 后 ， 声 0 
和 虹膜 识别 也 逐步 加 入 到 人 机 交互 方式 的 行列 之 中 。 其 根本 目的 是 为 了 减少 用 户 的 操作 时 间 
成 本 以 及 学 习 成 本 ， 并 提升 产品 的 易 用 性 和 用 户 的 体验 感 〈 图 1-5)。 
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图 1-5 


所 以 ， 交 互 设计 其 实 就 是 设计 用 户 行 为 的 工作 。 让 用 户 能 够 很 好 地 利用 移动 互联 产品 解 
决 问题 ， 并 且 在 满足 用 户 需 求 的 前 所 下， 实现 公司 和 产品 熏 利 的 商业 目的 。 那 么 ， 官 方 对 于 
交互 设计 的 定义 也 是 围 经 看 用 户 体 验 这 样 的 核心 而 展开 的 。 

交互 设计 ， 定 义 了 交互 系统 的 结构 和 行为 。 交 互 设计 师 努 力 在 用 户 和 用 户 使 用 的 产品 或 
者 服务 间 创 建 有 意义 的 关联 ， 不 管 是 PC、 移 动 设备 、 家 用 电器 或 者 其 他 。 一 一 ”国际 交互 
设计 协会 〈Ixdc ) 

交互 设计 ， 又 称 互动 设计 (Interaction Design)， 是 定义 、 设 计 人 造 系 统 行 为 的 设计 领 
域 。 人 造物 ， 即 人 工 制 成 物品 ， 例 如 ， 软 件 、 移 动 设备 、 人 造 环 境 、 服 务 、 可 佩 市 装置 以 及 
系统 的 组 织 结构 。 交 互 设计 在 于 定义 人 造物 的 行为 方式 〈interaction， 即 人 工 制品 在 特定 场景 
下 的 反应 方式 ) 相关 的 界面 。 一 一 维基 百科 

那么 ， 交 互 设 计 的 工作 内 容 主 要 是 研究 用 户 与 产品 之 间 的 使 用 关系 ， 由 用 户 定 位 、 产 品 
市 场 定位 、 功 能 罗列 的 思维 导 图 建立 以 及 用 户 的 功能 虚拟 试用 流程 的 分 析 ， 产 品 低 保 真 框 架 
图 的 建立 等 工作 内 容 组 成 (图 1-6)。 
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3. 产品 的 用 户 体验 设计 

用 户 体验 设计 ， 也 称 作 UE 或 者 UX， 是 User Experience 的 缩写 。 用 户 体 验 是 指 用 户 在 
使 用 一 于 产品 时 的 主观 感受 。 例 如 短信 ， 微 信 不 但 是 一 蒜 社 交 软 件 ， 更 以 此 为 基础 承担 起 在 
线 游戏 平台 ， 移 动 文 付 等 功能 ， 己 成 为 很 多 用 户 生 活 、 娱 乐 、 工 作 必 备 的 一 球 手 机 应 用 ， 上 其 
有 很 高 的 用 户 纤 性。 人 简 而 言 之 ， 一 个 产品 用 起 来 丈 不 爽 ， 这 就 是 用 户 体 验 。 一 个 好 的 用 户 体 
验 ， 其 涉及 到 用 研 、 交 互 、 视 觉 、 开 发 、 业 务 模式 以 及 各 种 利益 相关 者 等 多 个 环节 。 

也 束 是 说 ， 在 用 户 体验 设计 之 中 ， 已 经 不 再 仅仅 关注 产品 的 视 党 效果， 而 是 有 意识 的 创 
造 与 用 户 产 生 关 系 的 每 个 互动 点 。 从 显 性 的 观察 和 设计 包括 产品 的 视觉 、 和 触觉 、 听 和 觉 等 方面 
延伸 和 上 升 至 情感 与 共鸣 ， 最 终 产 生 用 户 对 产品 的 和 攻 性 。 

答 单 地 说 ， 提 升 用 户 体验 已 经 不 再 是 只 靠 单 一 的 产品 本 号， 而 是 要 把 视野 放 在 用 户 、 产 
品 、 服 务 以 及 情感 界面 市 点 的 亲眼 所 见 、 接 触 所 获 、 交 流 所 感 而 产生 的 综合 体验 之 上 ， 世 束 
是 服务 设计 中 的 “服务 生态 链条 ”。 

只 有 用 户 体 验 才 是 产品 真正 的 灵魂 。 其 实 从 某 种 程度 来 讲 ， 用 户 体 验 也 可 以 概括 为 品牌 
思维 ， 用 一 致 的 品牌 化 思维 创造 和 规划 所 有 区 点 ， 即 用 户 体 验 供应 链 。 

苹果 手机 并 不 是 单纯 依靠 手机 硬件 来 启 得 用 户 ，iPhone 如 果 单 纯 比 拼 人 硬件 的 话 ， 并 没有 大 
多 出 彩 的 地 方 。 但 还 是 有 很 多 用 户 愿 意 为 其 买单 ， 这 是 由 于 围绕 痒 果 手机 ， 苹 果 提 供 了 一 连 串 
的 线 上 及 线 下 服务 来 提升 用 户 的 使 用 体验 ， 包 括 iOS 系统 ，icloud，APP Store 等 (图 1-7)。 


[| 


lI-7 


所 以 ， 很 多 用 户 选 择 iPhone 的 真实 原因 是 对 以 侠 果 手机 为 承载 的 一 整套 服务 体系 的 认 


可 ， 这 其 实 束 是 品牌 的 效应 和 思维 。 

4. 服务 设计 

当前 ， 从 业者 对 于 行业 和 产品 的 认 知 达 到 了 一 个 新 的 高 度 ， 那 么 ， 服 务 设 计 吏 征 其 
中 非常 重要 的 组 成 部 分 。 对 于 产品 来 讲 ， 服 务 设 计 是 有 效 地 计划 和 组 织 一 项 服务 中 所 涉 
及 的 用 户 、 基 础 设施 、 线 上 线 下 等 相关 组 成 因素 的 天 系 ， 从 而 提高 用 尸体 验 和 服务 质量 
的 设计 活动 。 其 重 扣 在 于 研究 用 户 体 验 服 务 的 一 些 节 点 和 细 市 ， 并 将 其 组 成 一 整套 服务 
的 体系 。 
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刚才 所 提 到 服务 中 所 包含 的 用 户 、 基 础 设施 、 线 上 线 下 等 相关 的 组 成 部 分 ， 可 以 把 
它们 称 作 利益 相关 者 ， 也 叫 作 “ 触 点 ”>， 那 么 ， 对 于 触 点 的 合理 处 理 将 直接 决定 服务 的 
用 户 体 验 。 

所 以 ， 要 求 设计 师 能 够 将 设计 的 眼光 放 到 一 个 更 为 宏观 的 位 置 ， 比 如 说 ， 在 研究 电子 两 
城 线 上 交易 这 一 套 服务 时 ， 不 光 要 考虑 电子 商城 本 里 的 易 用 、 信 息 推 送 、 产 品 划分 ， 还 应 该 
更 多 考虑 客户 和 商家 的 天 系 、 产 品 的 质量 、 物 流 配 送 的 效率 、 信 用 中 介 银 行 的 安全 性 等 相关 
内 容 ， 因 为 这 些 组 成 内 容 都 会 影响 到 整个 服务 流程 给 予 用户 的 体验 。 

最 后 可 以 总 结 一 下 ， 服 务 决 定 用 户 情绪 的 需求 ， 而 用 户 需求 又 可 以 转化 为 产品 的 功能 ， 
产品 的 功能 可 以 通过 交互 方式 进行 体现 ， 那 么 交互 方式 最 终 以 丰富 的 视觉 效果 呈现 。 


1.2.1 ”HTML5 概况 


2014 年 10 月 ， 随 着 HTML5 的 最 终 定稿 ， 掀 起 了 Web 时代 的 新 浪潮 。 在 移动 界面 的 世 
界 中 ， 除 了 原生 应 用 (Native App) 之 外 ， 移 动 问 网 页 伴随 看 HTMLS 的 出 现成 为 了 移动 界 
面 中 重要 的 组 成 部 分 之 一 。 这 是 由 于 HIMLS 的 便捷 开发 以 及 耗 时 较 短 的 bug 修复 等 优势 成 
为 网 页 开发 的 首选 ， 而 原生 APP， 以 iOS 平台 为 例 ， 将 产品 投放 到 应 用 中 心 时 需要 7 一 8 个 
工作 日 进行 人 工 审核 ， 所 以 将 内 容 全 部 转换 成 APP， 不 论 从 开发 成 本 还 是 更 新 时 间 都 是 一 件 
不 现实 的 事情 。 

对 于 HTMLS 来 说 ， 其 最 大 的 优势 之 一 就 是 对 于 移动 端的 延展 和 改变 。 各 大 浏览 器 也 
都 纷纷 文 持 HTML5， 它 使 网 页 内 容 更 加 丰富 ， 不 仪 可 以 显示 三 维 图 形 ， 还 可 以 在 不 使 
用 Flash 插件 的 基础 上 实现 音频 、 视 频 等 视 和 沉 效果 。 它 是 在 HIML4 的 基础 之 上 ， 加 进 
了 一 些 新 的 标记 、 属 性 、 功 能 的 超 文本 标记 语言 ， 比 如 说 新 的 HTML 文档 结构 、 新 的 
CSS 标准 、API 等 。 

HTMLS 不 用 下 载 安装 ， 完 全 靠 浏 览 器 就 可 以 运行 。 它 可 以 让 开发 人 员 在 不 使 用 Flash 
插件 或 第 三 方 媒体 插件 的 情况 下 ， 就 可 以 在 网 页 中 播放 视频 或 音频 等 媒体 ， 大 大 降低 了 开发 
应 用 的 成 本 与 时 间 。 它 还 提供 了 很 多 的 应 用 程序 结构 “API)， 例 如 基于 浏览 器 支持 的 图 形 
API、 地 理 信息 API、 本 地 存储 API 和 视频 播放 相关 的 API 等 ， 这 些 API 使 开发 一 个 功能 型 
的 应 用 更 加 容易 了 。 

现今 ， 不 管 是 在 手机 上 还 是 在 平板 电脑 上 ， 随 处 可 以 见 到 HIMLS 网 站 、HTMLS 应 用 
软件 以 及 HTMLS5 游戏 ，HIML5 叉 作 为 移动 端 开 发 的 主流 语言 ， 这 都 说 明 HIMLS 的 前 途 
是 无 可 限量 的 。 


1.2.2” 啊 应 式 设 计 


HTMLS 是 一 种 被 PC、Mac、iPhone、iPad、Android 手机 等 多 种 终端 浏览 器 支持 的 路 和平 


侣 语言 (图 1-8 )。 
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在 HIMLS 诞生 之 后 ， 站 中 设 放 中 最 天 的 改变 就 是 啊 应 六 设计 的 呈现 。PC 3 前 网 页 产品 会 随 
着 浏览 乾 贤 度 的 变化 而 进行 网 页 内 部 元 素 的 重组 ， 以 适应 各 种 终 疹 不 同 的 屏 医 变化 《〈 图 1-9)。 
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9 
所 以 ， 网 页 页 面 的 设计 与 开 友 应 该 根据 系统 、 屏 大 尺寸 以 及 屏 融 横 回 竖 问 的 切换 与 变化 
等 进行 相应 的 啊 应 和 调整 。 无 论 用 户 正 在 使 用 笔记 本 电脑 还 是 平板 电脑 ， 页 面 都 可 以 目 动 切 
换 分 辩 率 、 图 瞩 尺 寸 及 相关 脚本 功能 等 以 适应 不 同 设 备 。 图 1-10 中 所 展示 的 便 是 网 页 Wk 
ee 前 中 不 同 的 显示 戏 霖 。 其 实 ， 啊 应 式 商 计 也 束 契 指 一 个 网 站 能 够 兼容 多 
终 闹 和 设备 ， 而 并 不 是 为 每 个 终 闹 做 一 个 特定 的 版 本 。 这 在 减少 了 开 友 成 本 的 同时 也 :多 提 
供 好 的 使 用 体验 ， 真 正 实现 路 平台 展现 ， 用 户 只 需 打 开 浏 览 喜 便 可 进行 浏览 ， 而 不 需要 像 原 
生 应 用 一 样 下 载 和 安装 。 


Lo 
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从 设计 角度 来 讲 ， 原 先 只 针对 PC 并 进行 网 页 设计 即 可 ， 而 现在 ， 需 要 通过 主流 设备 的 
类 型 及 尺寸 来 确定 布局 以 便于 设计 多 万 样式 ， 再 分 别 投 册 到 相应 的 设备 来 显示 。 那 么 啊 应 式 
网 站 如 何 识别 浏览 器 的 变化 而 进行 相应 的 元 又 重组 呢 ? 在 这 里 残 会 涉及 到 一 个 非 铝 重要 的 概 
念 ， 即 断 点 (Break Point) 的 使 用 。 
通俗 来 讲 ， 需 要 在 哪些 尺寸 下 改变 网 页 布局 ， 也 束 古 所 称 作 的 断 点 。 例 如 针对 PC、 平 
板 电脑 、 手 机 的 分 辨认 来 设置 断 点 ， 比 如 早期 1024px 对 应 加 面 、768px 对 应 Pad，480px 对 
应 手机 每 。 但 是 有 时 候 ， 这 些 屏 硕 尺 寸 会 不 断 的 变化 ， 类 似 于 2K 屏 帮 应 用 到 手机 后 ， 例 如 
Galaxy S 6 以 及 Galaxy S 7， 大 大 提升 了 手机 的 屏幕 分 辨 紊 。 所 以 ， 啊 应 不 应 该 只 针对 某 些 
设备 ， 需 要 针对 的 是 一 个 浏览 右 宽 度 区 间 值 《图 1-11)。 
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那么 ， 这 些 断 点 是 如 何 设 置 的 呢 ? 

灶 点 的 设置 是 根据 内 容 的 需要 而 进行 的 ， 当 网 页 显示 的 内 容 和 元 系 组 成 在 达到 一 个 临 寞 
扩 时 ， 也 束 是 视觉 效果 不 符合 人 们 的 审美 或 者 影响 到 了 网 页 元 系 的 组 成 和 结构 ， 这 就 是 十 要 
的 断 操 。 问 题 是 可 能 无 法 在 视觉 设计 的 阶段 束 履 盖 所 有 的 尺寸 ， 这 样 束 需要 结合 现 有 的 第 规 
终端 设备 来 确立 断 点 并 完成 设计 。 

综 上 所 述 ， 啊 应 式 设 计 的 优点 在 于 ， 可 以 相对 固定 断 点 ， 方 便 设 计 师 和 工程 师 提 烁 设计 
模式 。 但 其 缺点 就 在 于 ， 设 备 的 快速 更 新 以 及 屏 用 的 旺 示 等 级 的 不 断 捉 升 ， 总 是 无 法 和 履 兰 或 
者 是 不 能 实时 适 配 新 的 设备 和 屏 疾 。 


1.2.3 HIML5 的 应 用 领域 


那么 ，HTMLS 的 适用 范围 、 应 用 领域 以 及 出 现 的 形式 也 是 非常 广泛 和 丰富 的 。 主 要 表 
现在 以 下 几 个 方面 : 

1) 也 就 是 刚才 所 提 到 的 啊 应 式 设计 。 

2) HS 移动 应 用 。 微 信 公 众 服 务 平台 以 及 微 信 小 程序 。 那 么 ， 什 么 是 小 程序 呢 ? 来 看 一 
下 官方 给 出 的 定义 : 小 程序 是 一 种 不 需要 下 载 安装 即 可 使 用 的 应 用 ， 它 实现 了 应 用 “触手 
可 及 ”的 梦想 ， 用 户 扫 一 扫 或 者 搜 一 下 即 可 打开 应 用 。 这 也 体现 了 “用 完 即 走 ” 的 理念 ， 
用 户 不 用 关心 是 否 安装 太 多 应 用 的 问题 ， 应 用 将 无 处 不 在 ， 随 时 可 用 ， 但 又 无 需 安 装 秋 载 
(定义 来 源 ， 腾讯 ， 张 小 龙 )。 其 实 ， 通 俗 得 讲 ,“ 小 程序 ”将 可 以 让 用 户 想 要 查看 应 用 的 
时 候 随时 可 以 找到 当前 程序 ， 且 在 使 用 完 之 后 可 以 不 用 负 任 何 责任 ， 即 不 用 下 载 安装 或 伙 
载 〈 图 1-12)。 
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3) HS 微 信 营 销 广 告 。 “HS5” 指 的 是 传播 于 微 信 朋友 圈 中 的 电子 营销 案例 ， 如 同 当 年 的 
室外 广告 或 者 是 户外 LED 屏幕 广告 一 样 ， 只 不 过 是 现在 运用 移动 互联 网 媒介 来 展现 ， 利 用 
移动 互联 传播 快 的 特点 进行 宣传 营销 的 电子 广告 。 

用 户 可 以 浏览 、 互 动 甚至 分 享 HS 广告 ， 其 实时 性 、 娱 乐 性 、 交 互 性 极 强 。 虽 然 会 被 其 丰 
军 绚 丽 的 画面 ， 灵 动 的 交互 以 及 精彩 的 创意 所 震撼 ， 但 说 到 搬 其 只 是 一 个 类 似 于 快餐 式 的 营销 
模式 ， 其 “保鲜 期 ”通常 只 有 24 个 小 时 。 但 是 ，HS 营销 广告 的 设计 也 成 为 了 众多 广告 人 、 视 
觉 设 计 师 、 商 业 插画 师 涉足 互联 网 的 重要 的 通道 ， 同 时 创意 独特 以 及 推广 度 高 的 微 信 营销 广告 
也 是 一 个 设计 团队 最 好 的 宣传 手段 ， 所 以 对 于 HS 营销 广告 的 创意 和 设计 也 束 大 行 其 道 了 。 

例如 ，2016 年 天 猫 双 11 新 媒体 推广 之 一 的 HS 营销 广告 “天 猫 双 11， 穿 越 宇宙 的 邀请 
函 ” 便 是 其 成 功 代 表 之 一 ， 它 结合 了 HS 及 现在 非常 流行 的 全 景 技 术 ， 给 用 户 以 极 强 的 代入 
感 和 沉浸 感 。 

图 1-13 展示 的 是 关于 音乐 打 榜 专题 的 HS 微 信 视觉 设计 稿 。 
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上 面 阅 到 了 HTMLS 的 运用 领域 ， 那 么 现在 一 起 来 了 解 一 下 HTMLS 的 发 展 历程 。1993 
年 6 月 ，HTML 最 早 由 互联 网 工程 任务 组 〈IETE) 发 布 1.0 版 本 ， 它 不 是 标准 的 结构 语言 ， 
存在 的 意义 不 大 。1995 年 11 月 ，IETF 继续 发 布 『 HIML 2.0， 它 是 HTML 最 早 的 规范 。 由 
于 W3C (World Wide Web Consortium ) 的 出 现 ，IETF 把 Web 标准 的 制定 权 转 让 给 
W3C。1996 年 的 1 月 ，W3C 推出 HTML 3.2。 在 三 年 的 时 间 内 ，W3C 对 HTML 做 了 很 多 改 
进 ， 又 相继 发 布 了 几 个 版 本 。 

1999 年 ，W3C 发 布 HTML 4.01。 它 可 以 使 文档 内 容 与 样式 分 离 ， 不 会 像 HIML 3.2 
一 样 破 坏 文 档 内 容 ， 维 护 起 来 更 加 方便 。HTML 4.01 成 为 了 20 世纪 未 非常 流行 的 网 页 编辑 
语言 ， 对 Web 影响 非常 之 大 。 

2001 年 ，W3C 发 布 XHTML 1.0， 它 在 HTML 4.01 的 基础 上 做 了 修改 ， 相 比 HTML 
4.01 语法 更 为 严格 ， 版 本 更 为 纯净 ， 并 且 它 还 能 在 当时 所 有 的 浏览 器 上 被 解释 ， 成 为 更 标准 
的 标记 语言 。 紧 接着 ，W3C 又 发 布 了 XHTML 1.1， 它 和 XML 没有 什么 区 别 ， 但 在 使 用 
XHTML 1.1 文档 时 ， 当 时 最 红 的 Internet Explorer 却 无 法 正常 显示 。 所 以 ，W3C 又 继续 改 
进 XHTML 1.1。 在 2002 年 8 月 发 布 了 XHTML 2.0， 但 是 它 不 兼容 之 前 的 HTML 版 本 ， 使 
用 时 需要 重新 学 习 ， 这 对 于 网 页 编辑 人 员 来 说 并 不 是 好 事 。 

2004 年 ，Web Hypertext Application Technology Working Group (WHATWG) 组 织 成 
立 ， 开 始 重 走 HIML 的 路 线 ， 开 发 HTML5。 他 们 从 两 个 方面 对 HTML 进行 扩展 ， 分 别 是 
Web Form 2.0 和 Web Apps 1.0， 之 后 这 两 个 版 本 合并 后 成 为 HTML5。2006 年 ，W3C 选择 
开发 HTML5， 上 自己 成 立 了 HTMLS 的 工作 组 ， 它 在 WHATWG 研发 的 HTMLS 的 基础 上 展 
开 研 究 。2008 年 ，W3C 发 布 『 HIMLS 的 章 案 ， 这 是 HIMLS 的 最 初版 本 。2009 年 ，W3C 
放弃 了 XHTML 的 研究 。2010 年 ，HTMLS 的 视频 播放 器 开始 取代 Flash 的 地 位 ， 并 且 得 到 
谷歌 的 大 力 支持 ， 同 时 ，HTMLS5 的 语法 规范 也 开始 攻击 下 的 私有 语法 ， 打 破 Adobe Flash 
与 正在 Web 上 的 主宰 。 

2011 年 ， 迪 士 尼 、 亚 马 进 、Pandora 电台 相继 使 用 了 HTMLS 编写 的 应 用 、 音 乐 播 放 
器 ， 用 户 可 以 离线 使 用 ， 获 得 了 用 户 的 好 评 ， 并 且 Adobe 公司 停止 为 移动 设备 开发 Flash 播 
放 器 。2012 年 ，Linkedln 推出 了 95% 都 是 基于 HIMLS 开发 的 iPad 的 应 用 。HTMLS5 还 支持 
大 容量 的 文件 上 传 ，Flickr 就 使 用 它 提 高 了 上 传 速度 。2013 年 ， 大 部 分 的 手机 都 开始 支持 
HTMLS 的 应 用 。 终于 ， 经 过 8 年 的 艰辛 研究 ，2014 年 10 月 29 日 ，W3C 宣布 HTMLS 的 
标准 规范 制定 完成 。 


12.4 为 什么 HIML5 备 受 关注 ? 


1. 技术 支持 

新 添加 的 标签 ， 更 加 便于 SEOQ， 提 蜗 浏 览 器 对 于 导 般 、 栏 目 链接 、 琳 蛙 、 文 章 等 其 他 部 
分 的 搜索 ， 从 而 帮助 的 网 站 提升 内 容 的 价值 。 

开发 移动 APP 的 方式 ， 从 Native (本 地 APP) 到 HTML5 再 到 Hybrid (混合 型 ) 的 
出 现 ， 提 高 了 开 友 速度 ， 前 问 工 程 师 可 以 使 用 Cordova 框架 或 HBuilder 软件 等 来 开 友 ， 减 
少 插 件 ， 节 约 开 发 成 本 ， 并 且 同 一 个 功能 只 需要 在 不 同 的 平台 进行 编译 束 可 以 运行 ， 实 现 了 
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跨 平台 。 
并 且 ， 相 对 于 开发 成 本 高 郧 的 原生 APP 来 说 ， 其 依靠 更 加 实惠 并 且 可 实现 跨 终端 以 及 


路 系统 ，Busg 修复 速度 快 的 特点 成 为 移动 产品 的 新 贵 。 

2. 硬件 支持 

首先 来 看 一 下 安里 系统 ， 安 时 手机 端的 百度 浏览 器 、UC 浏览 医 、QQ 浏览 旨 对 HTML5 
都 文 持 。 

其 次 是 1OS 系统 ，iPhone 从 4s 到 6s， 速 度 提 高 了 7.5 倍 ， 也 不 断 的 对 支持 HTML5 新 特 
性 更 新 升级 ， 比 如 WebSockets、 加 速 器 、 新 的 表 早 控件 与 属性 、 支 持 新 的 event、SVG。 

3. 厂商 文 持 

移动 端 : iOS 的 Safari 浏览 器 ， 安 日 的 CC 浏览 器 ，TX 浏览 器 给 予 了 HIMLS 极 大 的 文 持 。 

PC 端 : Chrome、FireFox、IE 9、Opera 等 浏览 器 以 及 国内 的 一 些 浏 览 器 ， 如 360 极 
速 、 搜 狐 、 邀 游 、QQ 浏览 器 都 开始 文 持 HTML5。 

HIMLS 有 了 这 些 文 持 ， 未 来 的 道路 会 越 走 越 顺 ， 虽 然 HTML5 有 它 的 不 足 ， 但 这 恰好 
说 明 HTML5 还 有 进步 和 发 展 的 空间 ， 相 信 HIMLS 会 进一步 影响 互联 网 产品 在 设计 和 开发 
方面 的 工作 方式 。 


对 于 设计 而 言 ,“ 适 合 ” 才 是 最 好 的 。 所 以 ， 当 考 氏 产品 的 设计 和 开发 时 需要 明 


日 ， 先 要 做 到 了 解 用 户 ， 才 是 在 后 期 分 析 用 户 的 痛 点 ， 功 能 的 确定 延展 以 及 视觉 设计 风 
格 人 确定 的 根本 。 那 么 ， 就 产品 而 言 ， 需 要 确定 的 是 用 户 本 里 的 生活 以 及 工作 习惯 ， 痛 点 
和 需求 ， 当 前 用 户 在 使 用 这 天 产 品 的 时 候 所 处 的 环境 差异 ， 在 哪 种 环境 中 使 用 这 和 亚 产 品 
的 几率 较 多 ? 

这 也 是 设计 师 在 设计 产品 之 前 需要 考虑 的 问题 ， 例 如 是 室内 环境 占 主导 还 是 室外 环境 占 
主导 ? 网 络 运行 环境 是 稳定 的 WiFi 环境 ， 还 是 使 用 流量 的 情况 大 多， 因为 一 般 在 这 种 情况 
当中 ， 用 户 在 使 用 产品 时 的 网 络 环境 是 不 够 稳定 的 ， 所 以 这 就 会 影响 到 产品 应 该 是 以 图 厂 文 
字 推 送 为 主 ， 还 是 以 视频 为 主 。 

其 至 用 户 在 进行 信息 输入 时 是 保持 传统 的 文字 输入 为 主 ， 还 是 需要 加 入 语 首 输入 来 
降低 用 户 的 操作 成 本 。 产 品 背 景色 是 深 色 为 主 还 是 浅 色 为 主 ， 是 人 否 需 要 调 取 极速 模式 来 
应 对 一 些 特殊 的 网 络 环境 等 。 产 品 会 被 这 些 因 素 所 影响 ， 所 以 当 设 计 和 规划 一 和 产品 之 
末 ， 需 要 考虑 的 方面 是 很 多 的 。 那 么 还 有 一 个 重要 的 因素 ， 融 是 产品 所 存在 的 终端 以 及 
人 硬件。 

对 于 产品 而 言 ， 它 所 存在 的 终端 不 同 ， 用 户 在 操作 产品 时 的 交互 方式 也 会 有 很 大 
的 区 别 。 当 前 ， 人 们 使 用 的 终端 更 多 是 智能 手机 ， 当 用 户 在 进行 人 机 交互 时 ， 其 实 更 
多 是 通过 手指 在 屏 厅 上 的 操作 来 进行 的 。 其 中 ， 手 势 操作 是 最 常见 的 ， 也 是 最 普 授 的 
(图 1-14)。 

那么 ， 随 看 智能 手机 为 第 三 方 应 用 提供 的 功能 接口 越 来 越 丰 证 ， 传 统 的 交互 方式 也 在 不 
断 的 变化 和 更 新 。 除 了 传统 的 手指 点 击 之 外 ， 现 有 的 交互 方式 中 也 加 入 了 语音 、 眼 动 、 指 
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纹 、 动 作 捕捉 等 新 的 人 机 交互 方式 ， 以 便于 减少 用 户 在 交互 时 的 操作 成 本 ， 提 高 了 操作 的 
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例如 ， 苹 果 在 推出 iPhone 6s 以 及 iPhone 6s Plus 时 ， 加 入 了 新 的 手指 点 击 模式 3D touch 
技术 ， 它 是 一 种 基于 手指 点 击 力度 的 不 同 而 识别 的 立体 触 控 技术 ， 运 行 于 iOS 系统 中 。 相 比 
于 多 点 触 控 的 二 维 平面 空间 中 ，3D touch 增加 了 对 屏幕 纵深 的 利用 ， 用 户 只 需 通 过 手指 重 按 
屏幕 便 可 收 到 新 的 信息 推送 《〈 图 1-15)。 
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3D touch 最 初 是 作为 Force Touch 运用 于 iWatch 的 屏幕 中 ， 以 便 对 小 屏幕 进行 多 纬度 的 
重复 利用 。 但 是 ，3D touch 的 操作 要 比 作 用 于 iWatch 上 的 Force Touch 要 更 加 的 灵敏 ， 而 且 
可 调 取 相关 的 功能 操作 进行 情景 化 玉 单 的 呼唤 ， 所 以 iPhone 的 3D touch 的 操作 体验 要 优 于 
Force touch (图 1-16)。 

3D touch 的 出 现 是 为 了 在 操作 中 更 好 地 连接 列表 页 面 与 详情 页 面 ， 在 列表 页 面 也 可 以 快 
速 预 览 详情 内 容 并 进行 一 些 重 要 操作 。 不 需 进 入 详情 页 面 ， 就 可 以 更 好 的 提 融 用 户 在 产品 操 
作 时 的 效率 ， 节 省 操作 的 时 间 成 本 。 同 时 也 是 为 了 缕 解 手机 屏 磊 所 特有 的 “页 面 刷 新 ”所 和 带 
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营造 的 风向 标 
来 的 不 便 。 
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除了 3D touch 的 植 入 之 外 ， 动 作 捕 捉 也 成 了 人 机 交互 方式 中 章 要 的 组 成 部 分 ， 微 信 “ 反 
一 摇 ” 找 好 友 束 是 一 个 非常 典型 的 案例 ， 后 来 运动 记 步 类 APP 的 流行 将 动作 捕捉 推 回 了 一 
个 高 潮 ， 只 需 携 市 手机 或 佩戴 智能 手表 或 者 手 环 ， 就 可 以 统计 用 户 今 天 完成 的 步 数 。 图 1-17 
是 作者 团队 参与 设计 的 运动 类 APP 的 视 这 设计 样稿 ， 包 括 手 机 端 和 手表 终端 的 页 面 ， 服 务 
于 iOS 系统 。 
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移动 互联 时 代 到 来 
1.3.1 移动 新 与 已 并 的 区 别 


虽然 当前 互联 网 设备 主要 是 以 移动 问 智 能 设备 为 主 ， 例 如 智能 手机 、 平 板 电 脑 ， 也 包 
括 智能 手表 。 不 过 以 PC 端 为 主导 的 传统 互联 同样 也 在 不 断 地 适应 互联 网 发 展 湖 流 ， 如 同 
在 上 文 所 提 到 的 响应 式 设计 与 HIMLS 的 兴起 就 是 一 个 明显 的 例证 。 

虽然 PC 奖 网 页 受 HIMLS 的 影响 开始 同 移 动 端 大 量 的 适 配 ， 但 是 束 终 端 而 言 ， 两 者 之 
间 不 论 是 使 用 环境 还 是 设计 规范 等 方面 都 有 很 大 的 区 别 。 所 以 还 是 需要 清楚 ， 当 针对 不 同 的 
终端 进行 设计 和 开发 时 不 同 终 端的 特点 ， 这 样 才能 够 使 设计 符合 用 户 的 使 用 习惯 而 保证 用 户 
体验 的 不 断 优化 。 

那么 ， 移 动 终端 与 PC 端 之 间 的 区 别 如 下 : 

@ 屏幕 尺寸 的 不 同 以 及 设计 开发 的 规范 性 不 同 ; 

@ 使 用 环境 以 及 干扰 因素 的 区 别 导 致 交互 方式 的 不 同 ; 

@ 操作 媒介 以 及 操作 精度 的 不 同 。 

1. 屏幕 尺寸 的 不 同 及 设计 规范 性 的 不 同 

这 一 点 固然 是 最 为 明显 的 区 别 ， 从 硬件 的 屏幕 物理 尺寸 来 看 ，PC 端 屏幕 要 比 智 能 
手机 大 很 多 。PC 常见 尺寸 为 13 英寸 以 上 ， 而 对 于 智能 手机 ， 从 早期 的 3.5 英寸 ， 发 展 
至 现在 的 超大 屏 手机 ， 其 屏幕 的 物理 尺寸 也 就 稳定 在 5.5 英寸 左右 ， 例 如 iPhone 7plus 
便 是 如 此 。 其 主要 原因 惑 是 因为 智能 手机 设备 是 以 单 手 操作 为 主要 的 操作 方式 ， 所 以 它 
的 屏幕 不 宜 过 大 。 

例如 文字 ， 对 于 智能 手机 界面 中 的 文字 来 说 ， 以 iOS 系统 为 例 ， 其 正文 文字 的 大 小 通常 
为 24 号， 并 且 使 用 的 是 适合 高 清 小 屏幕 的 旧金山 字体 《图 1-18)， 那 么 如 果 把 它 放 到 PC 端 
的 话 ，24 号 文字 一 般 可 以 代表 中 等 大 小 的 文字 了 ， 而 在 PC 端 来 说 其 最 小 的 正文 文字 通常 以 
12 号 或 者 14 号 文字 为 主 。 
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一 一 视觉 营造 的 风向 标 

对 于 智能 手机 来 说 ， 为 了 保证 手指 点 击 的 触 碰 印 记 ， 在 设计 的 同时 也 要 考虑 到 每 一 个 图 
标的 点 击 热 区 范围 ， 也 就 是 其 切 图 的 范围 。 

iOS 系统 当中 规定 其 最 小 的 手指 点 击 范围 是 44x44pt (逻辑 像素 )。 

所 以 ， 如 果 针 对 于 750x1334px (像素 ) 的 设计 环境 进行 手机 页 面 设计 的 时 候 ， 一 般 会 
把 图 标的 实际 尺寸 按照 最 小 44x44pt 或 者 再 大 一 些 进行 设计 ， 而 针对 于 此 图 标的 切 图 范围 
需要 将 其 放大 至 最 小 88x88px 来 完成 (图 1-19)。 那 么 ， 在 原生 安 卓 系 统 当中 要 求 最 小 的 手 
指点 范围 是 48x48dp (逻辑 像素 )。 所 以 不 同 的 终端 ， 对 于 产品 的 开发 标准 也 有 很 大 
不 同 。 


“88pX， 
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2. 使 用 环境 及 干扰 因素 的 不 同 

作为 智能 移动 终 站 中 最 典型 的 代表 ， 智 能 手机 使 用 环境 的 雁 片 化 现象 更 加 严重 ， 使 用 的 
场景 和 环境 也 会 有 很 大 的 变化 ， 其 网 络 环境 也 会 根据 室内 和 室外 而 有 所 区 列 。 所 以 ， 针 对 于 
智能 手机 的 应 用 ， 需 要 在 最 便捷 的 操作 方式 和 最 短 的 时 间 成 本 来 完成 对 于 用 户 需求 的 满足 。 
通 钊 在 进行 镶 能 设备 操作 时 ， 时 间 较 短 ， 并 且 长 期 处 于 室外 环境 中 使 用 的 应 用 ， 网 络 以 及 产 
品 的 背景 色 都 需要 进行 改善 。 所 以 ， 其 交互 方式 也 会 随 痢 这 些 因素 的 变化 而 发 生 改 变 。 我 们 
会 有 友 现 ， 在 以 手指 点 击 为 基础 ， 久 能 设备 也 在 不 断 的 加 入 语音 、 指 约 、 动 作 、 三 轴 陀 螺 仪 带 
来 的 重力 感应 ， 甚 至 通过 眼 动 来 完成 人 机 交互 。 快 速 而 安全 ， 是 人 机 交互 方式 上 的 又 一 次 创 
新 ， 虹 膜 识 列 是 其 中 非常 重要 的 代表 “图 1-20)。 

智能 手机 给 第 三 方 应 用 的 功能 接口 越 来 越 丰 是 ，iOS10 升级 完成 后 ， 甚 至 可 以 使 用 Siri 
来 语音 操作 第 三 方 应 用 以 代 谷 之 前 的 手指 点 击 ， 在 极 大 地 解放 了 用 户 双 手 的 同时 ， 也 提高 了 
产品 使 用 的 效率 。 从 信息 推送 方面 来 访 ， 针 对 用 户 需 求 所 进行 的 个 性 化 信息 推送 的 方式 将 逐 
步 成 为 移动 设备 信息 推送 的 新 趋势 。 

对 于 传统 PC 来 说 ， 由 于 其 屏 右 较 大 ， 使 用 的 环境 也 相对 于 稳定 ， 一 般 在 室内 以 及 
长 时 间 用 的 情况 较 多 。 而 且 ， 其 交互 方式 较 智 能 手机 来 讲 也 显得 相对 单一 ， 退 第 通过 局 
标 键 盘 等 外 接 设 备 来 完成 信息 的 输入 ， 并 且 在 用 户 浏览 网 页 时 ， 用 户 所 接触 到 的 信息 量 
也 更 大 ， 信 息 推 送 的 方式 也 显得 更 加 “粗放 ”。 也 正 是 由 于 其 使 用 电脑 的 环境 以 及 时 间 
而 考虑 的 ， 例 如 以 360 网 站 导航 为 代表 的 导航 页 面 和 门户 网 站 都 是 在 PC 端 进行 信息 推 
送 最 典型 的 代表 。 
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Keep the camera clean Add mask 


Personalise your iris preview screen with a 
mask. To select a mask, go to Settings > Lock 
screen and security > Irises, then select Mask 

on preview screen. 


Dirt and debris on the iris camera, LED sensor, 
or proximity sensor may cause the device to 
have difficulty recognising your irises 
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3. 操作 媒介 以 及 操作 精度 的 不 同 

通过 上 面 的 介绍 ， 读 者 可 以 友 现 ， 屏 硕大 小 以 及 使 用 的 场景 和 环境 的 区 别 ， 部 会 造成 交 
互 方式 、 操 作 媒 介 、 使 用 时 间 以 及 信息 推送 的 不 同 。 所 以 作为 设计 师 来 说， 需要 针对 于 不 同 
的 终 闯 去 投 照 它 的 特点 进行 设计 ， 以 便 用 户 在 不 同 的 终 顺 和 场景 都 能 够 顺利 地 满足 用 户 
再 求 。 

总 结 一 下 ， 对 于 智能 设备 来 说 ， 其 交互 方式 会 更 加 多 元 化 ， 并 且 会 更 加 趋 于 效率 和 
镶 能 。 所 以 要 求 设计 师 在 产品 的 实用 性 上 面 考 感 的 维度 会 更 加 复杂 。 除 了 币 规 的 滑动 、 
反击 、 长 按 、 带 按 、 捍 合 等 手势 之 外 ， 还 要 结合 语 首 、 动 作 、 指 纹 等 配合 完成 人 机 
交互 。 

对 于 PC 器 ， 其 交互 方式 更 多 还 是 通过 鼠标 和 键盘 等 外 接 设 备 为 主 ， 而 相对 于 手指 点 
击 ， 鼠 标 操 作 会 更 加 精确 。 这 也 惑 导 致 了 两 个 终端 之 间 的 设计 规范 性 会 有 很 大 区 别 。 例 如 设 
计 网 页 时 需要 考 夸 到 控件 在 感受 到 鼠标 巧 停 押 产生 的 交互 样式 ， 而 在 和 欠 能 手机 产品 的 设计 和 


开发 中 则 通 第 不 圾 要 考虑 这 一 点 。 所 以 ， 和 六 能 设备 和 PC 冯 的 特点 及 区 别 都 是 密 不 可 分 的 ， 
是 典型 的 因果 关系 。 


1.3.2 ”移动 设备 的 特点 


以 入 能 手机 为 例 ， 通 种 在 使 用 镶 能 手机 的 时 候 是 以 竖 屏 状态 眉 多 ， 并 且 大 多 征 以 单 手 操 
作 的 。 那 么 对 于 鲁能 手机 屏幕 来 说 的 话 ， 通 向 会 以 屏幕 上 半 部 分 为 眼 部 热 区 ， 下 半 部 分 为 手 
部 操作 热 区 。 所 以 ， 通 各 会 把 展示 类 型 的 信息 ， 例 如 banner 图 ，LOGO 等 视觉 元 系 放 在 上 半 
部 分 的 眼 部 热 区 展示 ， 对 于 一 些 重要 的 操作 和 点 击 按钮 会 放 在 手机 的 中 下 部 分 ， 方 便 用 户 的 
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手指 反击 。 
例如 在 有 些 APP 当中 ， 将 返回 到 上 一 级 的 “返回 键 ” 以 及 部 分 重要 操作 放 在 屏 硕 下 方 


来 展示 (图 1-21a 所 示 )。 还 会 经 常 及 现 手机 移动 产品 的 登录 页 面 其 输入 框 和 控 钮 也 会 放置 
在 屏幕 中 线 以 下 来 行 展示 (图 1-21b 所 示 )。 

还 有 一 些 特点 总 结 如 下 : 

a) 界面 精致、 可 操作 性 强 。 所 以 这 也 束 需 要 设计 师 能 够 在 手机 屏 秦 大小、 信息 合理 完 
整 的 传递 和 用 户 阅 读 、 界 面 视觉 效果 的 美观 留 白 以 及 功能 区 域 划 分 之 间 寻 求 平衡 。 

b) 记忆 负 担 尽 量 减少 、 尊 重用 户 操 作 习 惯 。 在 使 用 移动 端 设 备 进行 操作 的 时 候 ， 要 求 
在 使 用 产品 的 时 候 尽 量 减 少 用 户 的 操作 时 间 成 本 ， 并 增加 产品 的 易学 性 ， 还 要 章 重 用 户 的 操 
作 习 惯 ， 保 证 快速 、 智 能 、 高 效 地 满足 用 户 需 求 。 
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a) 
1=21 
a) 重要 操作 置 于 下 方 ”b) 重要 操作 在 中 线 以 下 


c) 设计 风格 和 版 本 的 一 致 性 。 在 设计 应 用 视觉 效果 的 时 候 ， 不 同 的 应 用 以 及 不 同 的 系 
统 要 区 别 使 用 视觉 元 么 风 榜 ， 不 要 混合 使 用 。 
同时 也 要 注意 版 本 更 新 过 程 当 中 视觉 风 格 的 延续 并 保持 重要 功能 操作 图 标的 一 致 
性 ， 以 保留 产品 核心 功能 并 遵循 用 户 之 前 的 操作 习惯 。 当 产品 界面 的 视觉 设计 接近 尾声 
时 ， 通 利 要 根据 产品 的 视觉 来 编写 “产品 视 沉 规范 性 说 明文 要 ”以 保证 产品 视觉 风格 的 
= 
手机 应 用 通常 以 页 面 刷新 的 方式 为 主 ， 由 于 屏幕 较 小 ， 所 以 手机 应 用 通常 都 要 以 
新 的 页 面 进行 展示 。 列 表 页 跳 转 到 评 情 页 就 是 一 个 很 典型 的 例子 。 
例如 ， 社 交 平 台中 从 好 到 列 表 进 入 到 好 友 详 情 页 面 的 时 候 ， 由 于 手机 屏幕 较 小 以 及 竖 屏 
使 用 的 情况 ， 这 两 个 功能 页 面 通 第 会 分 别 在 两 张 页 面 进行 展示 ， 如 果 这 两 层 信息 放 在 一 个 屏 
幕 中 显示 势必 会 焦 主 当前 页 面 更 多 的 有 效 信 息 ， 所 以 把 这 种 方式 称 为 “页 面 刷新 ”或 者 “页 
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面 跳 转 ”( 如 图 1-22 )。 

页 面 跳 转 过 于 频繁 的 话 ， 会 无 形 中 增加 产品 的 点 击 深 度 ， 耗 费用 户 更 多 的 时 间 成 本 。 所 
以 面 对 这 样 的 情况 ，iOS 系统 结合 芋 果 手机 的 屏幕 特性 加 入 了 3D touch 这 样 交 互 方式 ， 来 减 
少 页 面 跳 转 。 其 目的 也 是 为 了 寻求 在 页 面 刷 新 、 信 息 展 示 和 传递 以 及 提升 界面 操作 效率 之 间 
寻求 平衡 。 
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决定 设计 的 先决 条 件 


Adobe Photoshop， 人 简称 “PS”， 是 著名 的 平面 设计 软件 ， 它 具有 强大 的 绘图 、 校 正 图 三 
及 图 像 创作 功能 ， 可 以 利用 它 创作 出 原创 性 的 作品 。Photoshop 的 前 身 是 一 个 叫 Barney Scan 
的 扫描 仪 配套 软件 ， 后 来 ，Adobe 公司 看 中 了 它 优秀 的 图 像 处 理 功 能 ， 将 它 开发 成 功能 更 为 
强大 的 图 像 处 理 软件 并 命名 为 一 Photoshop。 该 软件 界面 友好 ， 功 能 强大 ， 操 作 简 单 ， 有 具有 
无 与 伦比 的 创造 性 和 趣味 性 。 


2.1.1 ”Photoshop 的 应 用 领域 


设计 师 Thomas Knoll 和 John Knoll (图 2-1) 共同 开发 了 一 球 图 像 处 理 软 件 ， 这 就 是 
Photoshop 的 雏形 。 


妈 2-1 


Adobe 公司 收购 这 款 软件 后 ，Photoshop 版 本 1.0 于 1990 年 2 月 正式 发 行 。 这 个 版 本 只 
有 一 个 800KB 的 软盘 的 大 小 。 

Adobe Photoshop 重要 版 本 历史 : 

@ 1.0 Macintosh 1990 年 2 月 ; 

@ Photoshop CC 2013 年 6 月 ; 

@ Photoshop CC 2014 2014 年 ; 

@ Photoshop CC 2015 2015 年 ; 

@ Photoshop CC 2017 2016 年 。 

日 从 Photoshop CC 推出 后 ，Adobe 对 其 进行 了 三 次 重大 更 新 ，CC2017 是 现在 最 新 版 
本 。 如 今 的 Photoshop 已 不 仅仅 是 一 个 应 用 ， 已 发 展 成 为 视觉 设计 行业 的 代名词 。Photoshop 
的 出 现 改 变 了 人 们 处 理 图 像 的 方式 ， 同 时 也 改变 了 图 像 的 创建 方式 ， 而 这 一 切 都 令 设 计 师 的 
工作 更 加 快捷 有 效 ! 

很 多 人 对 于 Photoshop 的 了 解 仅 限于 “一 个 处 理 图 像 很 便捷 的 工具 ”并 不 知道 它 的 诸 
多 应 用 。 实 际 上 ，Photoshop 的 应 用 领域 是 很 广泛 的 ， 在 图 像 、 图形 、 文 字 、 视 频 、 出 版 各 


方面 都 有 涉及 。 
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一 一 视觉 营造 的 风向 标 

1. 平面 设计 

平面 设计 是 Photoshop 应 用 最 为 广泛 的 领域 ， 不 管 是 正在 阅读 的 图 书 封面 ， 还 是 大 街 
看 到 的 传单 、 海 报 ， 这 些 具 有 丰 军 网 像 的 平面 印刷 品 ， 基 本 上 都 用 Photoshop ， 
处 理 。 

2. 修复 照片 

Photoshop 有 强大 的 修复 和 美化 图 片 功 能 。 利 用 这 些 功 能 ， 可 以 快速 修复 一 张 破损 的 旧 
照 请， 也 可 以 修复 人 脸 上 的 斑点 等 缺陷 。 

3， 广告 摄影 

广告 摄影 作为 一 种 对 视 沉 要求 非常 严格 的 工作 ， 其 最 终 成 品 往往 要 经 过 Photoshop 的 修 
改 才 能 得 到 满意 的 效果 。 

4. 影像 创意 

影像 创意 是 Photoshop 的 特长 ， 通 过 Photoshop 的 处 理 可 以 将 原本 不 同 的 图 片 元 素 的 组 
合 在 一 起 ， 也 可 以 使 用 “移花接木 ”的 手段 使 图 像 发生 翻 天 履 地 的 巨大 变化 。 

5. 文字 创意 设计 

让 文字 光鲜 亮丽 ， 可 以 用 Photoshop 处 理 。 利 用 Photoshop 可 以 使 文字 发 生 各 种 各 样 的 
变化 ， 利 用 这 些 亏 术 化 处 理 后 的 文字 在 视觉 上 将 更 加 丰 曙 《图 2-2)。 
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6. 网 页 设计 

互联 网 时 代 是 促使 更 多 人 需要 掌握 Photoshop 的 一 个 重要 原因 ， 因 为 在 制作 网 页 时 
Photoshop 是 必 不 可 少 的 网 页 图 像 处 理 软 件 。 

7. 游戏 手绘 

由 于 Photoshop 具有 恨 好 的 绘画 与 调 色 功能 ， 许 多 插画 设计 制作 者 往往 使 用 铅笔 绘制 章 
稿 ， 然 后 用 Photoshop 填 色 的 方法 来 绘制 插画 。 除 此 之 外 ， 近 些 年 来 非常 流行 的 像 系 画 也 多 


EE 


决定 设计 的 先决 条 件 
为 设计 师 使 用 Photoshop 创作 的 作品 。 
8. 婚纱 照片 处 理 
当前 越 来 越 多 的 婚纱 有 影楼 使 用 数码 相机 ， 这 也 使 得 婚纱 照 厂 处 理 成 为 一 个 新 兴 的 行业 。 
9. 图 标 设计 制作 
虽然 使 用 Photoshop 制作 图 标 在 感觉 上 有 些 大 材 小 用 ， 但 使 用 此 软件 制作 的 图 标的 确 非 
音 精 美 ， 色 彩 斑 凋 像素 精细 《图 2-3)。 
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10. 表面 设计 制作 
界面 设计 是 一 个 全 新 的 领域 ， 由 于 党 到 越 来 越 多 用 户 挑 剔 而 引起 重视 ， 现 在 已 经 成 为 一 


种 全 新 的 职业 。 在 当前 还 没有 用 于 做 界面 设计 的 专业 软件 ， 因 此 绝 大 多 数 设 计 者 使 用 的 都 是 
Photoshop〈 如 图 2-4)。 
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Photoshop 主要 应 用 在 这 十 大 领域 ,但 实际 上 并 不 止 于 上 述 这 些 领 域 。 例 如 ， 建 筑 设 
计 、 影 视 后 期 制作 及 二 维 动画 制作 等 领域 ，Photoshop 也 都 有 应 用 。 
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2.1.2 ”矢量 图 和 位 图 的 概念 


天 量 的 概念 是 根据 几何 特性 来 绘制 图形 ， 是 用 线段 和 曲线 摘 述 图 像 的 ， 矢 量 可 以 是 一 个 
所 或 一 条 线 〈( 如 图 2-5)。 矢 量 图 只 能 菲 软件 生成 ， 矢 量 图 文件 占用 内 在 空间 较 小 ， 因 为 这 种 
类 型 的 图 像 文件 包 仿 独立 的 分 离 图 像 ， 可 以 自由 无 限制 的 重新 组 合 ( 图 2-6a); 位 图 图 像 也 
称 为 尽 阵 图 像 ， 位 图 是 用 一 格 一 格 的 像素 小 点 来 指 述 图 像 。( 图 2-6b) 


yg00% 300% 


舌 国 ， 晤 故 时 攀 利 清 巍 非 天 重 ， 续 旋 轩 会 桩 畏 
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位 图 和 矢量 图 最 大 的 区 别 是 矢量 图 形 与 分 辨识 无 天 ， 可 以 将 它 缩 放 到 任意 大 小 并 能 以 任 
意 分 辨识 在 输出 设备 上 打印 出 来 ， 都 不 会 影响 清晰 上 度 ， 而 位 图 古 由 一 个 一 个 像 系 点 产生 ， 妆 
放大 图 像 时 ， 像 系 点 也 放大 了 ， 但 每 个 像素 点 表示 的 闫 色 是 单一 的 ， 所 以 在 位 图 放大 后 就 会 
出 现 咱们 平时 所 见 到 的 马赛 克 状 。 位 图 可 以 表现 出 色彩 丰富 的 图 像 ， 可 允 真 表现 自然 界 各 类 
实物 ;而 天 量 图 形 色彩 不 丰 吝 ， 无 法 表现 盟 趴 的 实物 ， 矢 量 图 关 关 用 来 表示 标识 、 图 标 、 
LOGO 等 简单 直接 的 图 像 。 位 图 的 文件 类 型 很 多 ， 如 .bmp、.pcx、.gif、.jpg、.tt、.psd 等 ; 
矢量 图 形 格 式 也 很 多 ， 如 Adobe Ilustrator 的 .AI、.EPS 和 SVG 等 。 
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由 于 位 图 表现 的 色彩 比较 丰富 ， 所 以 占用 的 空间 会 很 大 ;由 于 矢量 图 形 表 现 的 图 像 闫 色 
比较 单一 ， 所 以 占用 的 空间 会 很 小 。 经 过 Photoshop 软件 ， 矢 量 图 可 以 很 轻松 的 转化 为 位 
图 ， 而 位 图 要 想 转换 为 天 量 图 必须 经 过 复杂 而 庞大 的 数据 处 理 ， 而 且 生 成 的 矢量 图 质量 也 会 
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有 很 大 的 差别 。 
2.1.3 ”Photoshop 的 操作 表面 


Adobe Photoshop CC 支持 Windows 操作 系统 、 安 日 系统 与 Mac OS (如 图 2-7)。 


1. Photoshop 工具 栏 
Photoshop 操作 界面 中 ， 主 要 分 为 5 大 版 块 : 菜单 栏 、 工 具 选 项 栏 、 工 具 箱 、 面 板 以 及 
编辑 区 ， 和 面板 当中 的 图 层面 板 是 主要 编辑 区 ， 一 个 丰富 的 界面 效果 由 辱 干 个 图 层 闭 加 而 成 。 如 
图 2-8 为 Photoshop CC 的 打开 界面 。 
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使 用 时 知 活 动 面 板 丢失 可 以 在 窗口 -工作 区 -复位 基本 功能 《或 者 工具 选项 栏 -基本 功能 - 


复位 基本 功能 )， 切 换 屏 幕 显 示 使 用 快捷 键 (F) (图 2-9)。 
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我 们 把 PS 的 工具 栏 分 割 为 四 大 模块 :选择 工具 组 、 绘 画 与 修饰 工具 组 、 矢 量 图 形 工 具 
组 (网 页 和 UI、 加 减 运算 )、 其 他 工具 组 (图 2-10)。 
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下 面 简单 介绍 下 UI 设计 中 用 这 些 工 具 的 功能 
a) 在 选择 工具 组 中 ， 可 以 利用 位 图 选 框 工具 制作 位 图 图 标 〈 图 2-11)。 
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图 2-11 


但 由 于 位 图 放大 会 失真 ， 所 以 在 设计 UI 图 标 时 建议 大 家 用 矢量 工具 组 来 绘制 图 标 。 
me ee ap 些 复 末 图 标 绘制 ， 比 如 和 常用 的 
官 形 、 圆 角 窍 形 、 圆 形 等 来 快速 实现 图 标的 制作 《图 2-12)。 
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c) 在 绘制 界面 中 ， 还 可 以 利用 这 些 工具 制作 出 一 些 精 美的 页 面 〈( 图 2-13)。 
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2. 选区 

a) 增加 选区 处 理 图 像 时 ， 常 常 要 选择 图 像 上 两 个 或 两 个 以 上 的 选区 ， 这 时 可 先 用 选 框 
工具 选择 第 一 个 选区 ， 再 按 住 〈Shift〉 键 ， 用 选 框 工具 画 出 增加 的 区 域 。 

b) 减少 选区 的 意思 就 是 当 打 开 一 个 图 像 ， 选 定 了 一 个 选区 ， 这 时 又 想 去 挥 其 中 的 一 部 
分 ， 可 以 这 样 来 处 理 : 先 在 图 像 上 选择 一 个 选区 ， 按 住 〈“Alt〉 键 再 画 出 一 个 选区 ， 确 保 第 
二 个 选区 与 第 一 个 选区 相交 部 分 就 是 你 要 去 挥 的 部 分 即 可 。 

c) 相交 选区 。 在 选择 图 像 区 域 的 时 候 ， 夺 和 完 选 定 了 一 个 区 域 ， 这 时 再 按 住 
《Shift+Alt〉 键 再 选中 一 块 区 域 ， 那 么 最 后 选中 的 区 域 就 是 两 次 选中 区 域 的 相交 部 分 。 

d) Photoshop 自由 变换 工具 的 快捷 键 : (Ctrlt+T)， 功 能 键 : (Ctrl)、(《Shift);、(Alt)。 其 
中 《Ctrl〉 键 控制 自由 变化 《Shift》 控制 方向 、 角 度 和 等 比例 放大 缩小 ; 《Alt〉 键 控制 中 心 
对 称 。 

3. Photoshop 颜色 模式 概述 

Photoshop 的 闫 色 模 式 是 将 某 种 闫 色 表 现 为 数字 形式 的 模型 ， 或 者 说 是 一 种 记录 图 像 闫 
色 的 方式 ， 分 为 : RGB 模式 、CMYK 模式 、HSB 模式 、Lab 颜色 模式 、 位 图 模式 、 灰 度 模 
式 、 索 引 颜色 模式 、 双 色调 模式 和 多 通道 模式 。 在 UI 界面 设计 时 应 选择 RGB 模式 。 人 的 眼 
谋 最 大 只 能 识别 的 闫 色 估 计 在 1000 万 种 ， 再 多 闫 色 也 不 能 明显 看 出 来 ， 而 一 般 显 示 器 和 印 
刷 也 只 能 是 8 位 、16 位 或 32 位 等 ， 更 高 位 数 只 能 是 研究 所 使 用 的 位 深度 ， 而 且 需 要 使 用 10 
万 像素 以 上 的 高 端 显示 器 去 呈现 ， 所 以 ， 在 UI 界面 设计 中 位 深 选 择 8 位 即 可 (图 2-14)。 

GUI 设计 中 也 常会 用 到 图 层 内 部 的 一 些 工 具 ， 如 图 层 样 式 中 一 些 图 层 效 果 的 添加 。“ 颜 
色 有 登 加 ”渐变 登 加 ”和 “图 守 登 加 ”样式 ， 可 以 分 别 使 用 颜色 、 渐 变色 与 网 肤 来 填充 选 定 
的 图 层 内 容 。 为 岁 像 添 加 这 三 种 样式 效果 ， 犹 如 在 图 像 上 新 添加 了 一 个 设置 了 “混合 模式 ” 
和 “不 透明 度 ” 样 式 的 图 层 ， 可 以 轻松 地 制造 出 绚丽 的 视 沉 效果。 除了 系统 内 置 的 一 些 图 层 
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样式 ， 也 可 以 目 己 制作 或 从 网 上 找 一 些 隶 材 以 便 随 时 调用 。 


名 称 (NN): 未 标题 -1 
预 设 (P): 自 定 | 复位 
|_ 存 倩 预 设 (5)..。 | 


是 除 预 及 避 


颜色 模式 (M): 
背景 内 容 (C): 


全) 高 级 


颜色 醒 置 文件 (D): sRGB IEC61966-2.1 
像素 长 宽 比 (X): 方形 像素 
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在 利用 图 层 绽 版 时 也 经 常会 用 到 前 景色 与 背景 色 的 切换 ， 复 位 前 景色 与 背景 色 的 快捷 键 
(D)， 切 换 前 景色 与 背景 色 快 捷 键 (X)。 还 有 一 些 隐 性 工具 ， 如 标尺 (Ctrlt+R〉 和 参考 线 ， 
也 是 UI 设计 中 必 不 可 少 的 利器 工具 。 

4. Photoshop 中 智能 对 象 的 运用 

为 了 在 编辑 图 像 时 不 破坏 图 像 原 有 的 像 系 ， 需 要 将 其 转换 为 智能 对 象 ， 图 保本 里 在 缩小 
放大 之 后 会 叶 致 图 像 的 失真 ， 转 换 为 智能 对 象 之 后 可 以 锁定 原 有 图 像 的 像素 ， 再 次 编辑 时 不 
会 受 其 影响 。Photoshop 转换 为 智能 对 象 ， 绝 对 是 一 个 值得 使 用 的 功能 。 通 过 保护 原始 像 
系 ， 任 何 缩小 的 处 理 都 会 保护 得 非常 好 ， 但 是 放大 处 理 仍 然 会 模糊 失真 ， 毕 葛 需 要 通过 计算 
添加 一 些 原本 没有 的 信息 。 当 然 ， 智 能 对 象 的 表现 会 远 高 于 普通 图 层 的 处 理 ， 所 以 最 好 在 一 
开始 束 选 择 像 聚 很 蜗 的 源 文件 来 处 理 ， 避 免 放 大 操作 。 

5. Photoshop 和 lllustrator 的 结合 使 用 

Adobe 旗下 的 Photoshop 和 lllustrator 两 者 之 间 是 互补 的 ，Adobe Hlustrator 是 天 量 制图 软 
件 ， 制 图 快速 便捷 ， 比 如 描 边 ， 而 Photoshop 中 则 需要 使 用 工具 加 减 交 结合 完成 ， 略 显 麻 烦 
一 些 ， 比 如 制作 一 些 特 殊 效 果 〈 凸 出 、 鱼 眼 等 )，Photoshop 则 较 难 实现 。 根 据 一 些 设计 师 多 
年 设计 经 验 ， 运 用 Iliustrator 能 够 更 快速 便捷 的 制作 图 像 ， 运 用 Photoshop 来 丰富 页 面 效 果 。 
在 Illustrator 中 制作 好 的 图 形 可 以 直接 将 其 拖 搜 至 Photoshop 中 ， 与 Photoshop 进行 结合 使 
用 ， 达 到 界面 更 完美 的 效果 。 

当然 在 Photoshop 中 所 绘制 的 图 像 ， 所 包含 的 图 层 也 可 以 直接 载 入 Illustrator 当中 进 
行 编辑 。 

6. Photoshop 鹤 面 制图 习惯 参考 

现在 是 互联 网 时 代 ， 部 分 传统 企业 也 转型 进入 互联 网 行业 ，UI 设计 师 的 需求 日 益 加 
大 ， 软 件 的 熟练 使 用 是 UI 设计 师 必须 具备 的 条 件 ， 让 UI 设计 师 能 够 更 高 效 的 完成 设计 
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J 
依照 作 图 习惯 ， 可 以 把 左 侧 工具 组 保持 不 变 ， 将 右 侧 的 模块 人 eh 
最 重要 的 模块 ， 可 单独 列 为 一 组 ， 文 字 、 属 性 、 段 落 列 于 图 层 左 侧 ， 每 一 组 常用 的 可 以 默认 
收缩 ， 便 于 调用 ， 从 而 节省 空间 ， 大 大 提高 界面 绘图 效率 。 


读者 可 以 在 设计 中 不 断 调整 自己 的 工作 界面 ， 使 软件 更 加 方便 易 用 。 这 里 呈现 一 些 设计 
师 的 工作 界面 (如 图 2-15)。 
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前 文 提 到 ， 在 一 些 图 层 样式 和 图 案 铸 加 中 可 以 添加 一 些 常 用 的 图 案 ， 制 作出 丰富 的 页 面 
效果 ， 增 加 情感 化 设计 。Photoshop 是 非常 强大 的 图 像 处 理 的 软件 ， 滤 镜 、 图 层 样式 、 混 合 
模式 都 是 设计 师 在 制作 特效 中 非常 喜欢 使 用 的 。 这 些 经 验 都 是 作者 团队 经 过 多 年 的 设计 经 验 
慢 慢 总 结 出 来 的 。 读 者 应 找到 适用 于 自己 的 最 便捷 、 最 高 效 的 工作 界面 ， 以 提升 设计 工作 效 
率 〈 如 图 2-16)。 


2 一 10 
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2.1.4 Sketch 的 功能 特点 


早期 的 Sketch 主要 定位 于 小 巧 的 矢量 画图 工具 ， 而 不 是 专业 设计 工具 ，2010 年 发 布 时 
是 比较 小 众 的 一 于 矢量 图 处 理 软件 〈 如 图 2-17 )。 
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图 2-17 


2012 年 5 月 Sketch 2 正式 发 布 了 ， 获 得 知名 设计 师 的 一 致 好 评 ， 也 顺利 赢得 了 当年 的 
苹果 设计 奖 ( 图 2-18)。 


可 | 


图 2-18 
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尽管 初期 Sketch 2 还 存在 很 多 bug (漏洞 ) 而且 容易 死机 ， 很 多 设计 师 依然 选择 使 用 

Sketch， 作 为 主要 设计 工具 。Sketch 2 和 Sketch 3 无 论 在 上 手 容易 度 、 功 能 体验 及 交互 细节 
上 都 比 Photoshop 更 加 便捷 好 用 (图 2-19 )。 
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对 于 设计 师 ，Sketch 界面 简单 明了 ， 学 习 成 本 低 ， 不 需要 很 高 的 门槛 束 可 以 学 会 。 
Sketch 简洁 的 工具 栏 专门 服务 于 UI 设计 ， 可 以 帮 设 计 师 高 效 完成 设计 ， 正 逐步 成 为 了 UI 视 
觉 设 计 师 的 “新 宠 ” 

与 Photoshop 相 比 ，Sketch 不 是 多 了 什么 功能 ， 而 是 它 本 身 针 对 UI 设计 的 操作 、 交 互 
模式 ， 使 用 起 来 非常 高 效 。Photoshop 软件 功能 它 考虑 的 用 户 人 群 不 只 针对 UI 设计 师 ， 虽 然 
在 最 新 版 的 Photoshop CC 中 ， 一 些 例如 高 效 的 切 图 ， 测 距 等 功能 有 所 升级 ， 但 是 Photoshop 
的 基本 工具 的 操作 以 及 交互 方式 从 来 不 是 为 UI 专门 设计 的 ， 所 以 Sketch 软件 的 专业 程度 就 
显得 比较 突出 。Sketch 功能 的 广泛 便捷 ， 但 只 能 在 Mac 系统 中 运行 。 

1. 清晰 明了 的 操作 表面 

Sketch 不 仅 简 化 了 操作 ， 也 使 用 户 可 以 更 专注 设计 的 内 容 。Sketch 中 没有 画布 的 概念 ， 
整个 空白 区 域 都 可 进行 设计 制作 ， 因 为 它 全 部 是 基于 矢量 的 。 但 有 时 候 我 们 需要 在 定制 好 的 
范围 进行 自己 的 设计 制作 。 在 Photoshop 及 其 他 设计 软件 中 ， 把 它 叫 做 画布 ， 但 在 Sketch 
中 ， 它 被 赋予 了 一 个 新 的 名 字 一 一 Artboard。 像 背景 图 层 一 样 ， 我 们 可 以 创建 无 数 张 
Artboard。 我 们 将 APP 界面 看 做 一 个 Artboard， 通 过 对 比 查 看 他 们 的 不 同 之 处 或 者 将 他 们 的 
交互 过 程 串 联 起 来 ， 只 需要 简单 的 一 到 两 步 的 操作 即 可 完成 。 然 后 ， 可 以 将 这 些 Artboard 分 
别 导出 为 PDF 或 者 分 为 一 个 个 的 图 厂 文 件 。 
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Sketch 对 于 画布 的 添加 没有 限制 ， 可 以 将 界面 全 部 放 在 一 个 文件 内 完成 ， 每 页 都 可 以 建 
立 多 个 画布 ， 而 且 即 便 设 计 很 多 界面 ， 在 运行 效率 上 也 不 会 降低 ， 这 是 因为 使 用 矢量 制图 ， 
所 以 文件 体积 也 比 Photoshop 小 很 多 。 

2. 全 面 完 整 的 素材 库 

设计 界面 过 程 当中 需要 加 入 一 些 系 统 本 里 自 带 的 控件 ， 针 对 不 同 版 本 ， 不 同型 号 的 控 
件 ， 比 如 弹出 的 提示 框 、 浮 动 键盘 。 读 者 大 可 不 必 自 己 再 画 一 次 ，Sketch 有 丰富 的 素材 库 ， 
读者 可 以 直接 将 需要 的 素材 拖 搜 进来 即 可 使 用 ， 节 省 了 大 量 的 时 间 ， 可 以 腾 出 更 多 的 时 间 用 
于 思考 核心 产品 设计 。 

3. 自动 保存 功能 

对 于 设计 师 来 说 最 残忍 的 事 莫 过 于 没有 来 得 及 保存 设计 成 果 ， 为 了 减少 Photoshop 崩 江 
造成 损失 ， 每 一 个 UI 设计 师 都 会 不 停 地 (Ctrl 十 s》 保存 文件 ， 而 Sketch 的 人 性 化 设计 可 以 
自动 保存 ， 它 不 会 打 断 你 ， 你 也 不 必 每 隔 几 分 钟 保存 一 次 。 

4. 智能 切片 工具 

Sketch 的 切片 工具 ， 可 以 轻松 将 一 个 图 标 导 出 为 适 配 于 iOS 和 安 卓 的 各 种 尺寸 ， 精 确 适 
配 xxhdpi，xhdpi，hdpi 等 屏幕 等 级 ，iOS 下 一 倍 、 两 倍 ， 甚 至 三 倍 的 切片 资源 。 更 重要 的 
是 ， 使 用 Sketch 完成 切片 工作 ， 将 比 传统 方式 节省 一 倍 甚 至 更 多 的 时 间 。 

5. 拖 搜 导出 一 一 更 加 方便 

Sketch 拖 搜 导出 的 方法 有 两 种 ， 一 种 是 通过 group (组 ) 导出 ， 男 一 种 是 通过 slice ( 切 
片 ) 拖 搜寻 出 ， 不 仅 可 以 拖 搜 导出 到 文档 、 文 件 夹 ， 还 能 直接 拖 搜寻 出 到 邮件 、 设 备 ， 甚 至 
上 传 到 网 站 。 

6. 重复 展示 一 致 动作 

重复 复制 的 操作 也 简练 很 多 ， 按 住 〈(Option〉 键 ， 点 击 要 复制 的 元 素 进行 拖 动 就 可 
以 。 将 元 素 拖 搜 到 目的 区 域 之 后 ， 使 用 《Command+D》 快捷 键 ， 束 可 以 重复 的 复制 这 一 
SNE Ts 

7. 共享 样式 更 加 独特 

针对 某 些 元 素 的 样式 重复 使 用 的 情况 ， 你 只 需要 将 原 有 的 样式 进行 命名 ， 然 后 就 可 以 使 
用 这 个 样式 ， 并 且 所 有 运用 到 这 个 样式 的 都 会 随 之 一 起 改变 ， 这 样 便捷 的 操作 比 Photoshop 
里 的 复制 粘贴 图 层 样 式 方 便 了 很 多 。 

8. 实时 查看 一 效果 图 镜像 

为 了 便于 设计 师 与 产品 经 理 或 客户 之 间 的 快速 交流 ，Sketch 支持 在 iOS 设备 上 查看 
设计 稿 ， 只 需要 下 载 iOS 的 APP， 就 可 以 在 苹果 系统 支持 的 iPhone、iPad 上 实时 查看 设 
计 稿 。 

9. 符号 

Sketch 中 还 有 一 个 非常 实用 的 功能 就 是 符号 。 设 计 过 程 中 会 有 许多 不 同 的 状态 、 模 式 
或 者 选项 ， 这 时 你 可 以 将 单个 屏幕 单独 设 定 为 一 个 “符号 ?”， 然 后 单 击 “ 转 化 为 符号 
(Convert to Symbol)” 按 钮 ， 并 复制 这 一 “符号 ” 当 改 变 这 个 符号 中 的 元 素 的 时 候 ， 所 复制 

34 


决定 设计 的 先决 条 件 
的 屏幕 会 同步 更 新 ， 十 分 快捷 。 


2.1.5 Sketch 的 使 用 方法 


1. 全 屏 演 示 模 式 
与 Photoshop 里 连 按 两 个 (F) 一 样 ， 隐 藏 所 有 工具 栏 和 菜单 ， 全 屏 展示 内 容 ， 使 用 的 
快捷 键 是 : (Command)。 
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2. 网 格 工 具 

在 Photoshop 中 网 格 算是 比较 低 端 的 工具 ，Photoshop 不 用 采用 网 格 插件 基本 就 不 可 用 ， 
而 Sketch 中 网 格 工 具 则 可 以 很 方便 的 进行 编辑 ， 有 传统 的 方 格 ， 也 有 横 问 和 纵 癌 组 成 的 长 方 
形 ， 使 用 起 来 真是 便捷 不 少 。 

3. 图 层 样式 

与 Photoshop 一 样 ，Sketch 也 有 渐变 、 摘 边 、 内 外 阴影 ， 不 同 之 处 在 于 Sketch 制作 图 形 
增添 图 层 样 式 时 可 以 奢 加 最 多 四 层 完 全 不 同 的 渐变 ， 添 加 无 限 的 描 边 和 内 外 阴影 。 在 制作 比 
较 复 杂 的 图 形 的 时 候 Sketch 会 更 加 便捷 。 文 字 的 样式 也 可 以 单独 的 保存 起 来 ， 方 便 对 多 个 的 
文本 进行 调整 。 图 层 样式 使 用 〈Alt 十 Command 十 c 或 v》 进行 复制 粘贴 。 

4. 钢笔 工具 

Sketch 的 钢笔 工具 也 比 Photoshop 好 用 ， 有 基体 表现 在 可 以 针对 像 叉 或 半 个 像素 对 齐 ， 而 
在 Photoshop 中 虽然 也 可 以 对 一 个 像素 对 齐 ， 但 设置 和 切换 很 麻烦 。 结 合 《Alt〉 键 可 以 画 出 
完美 的 弧 线 ， 绘 制 钢笔 路 径 时 ，Sketch 会 自 带 类 似 于 Photoshop 中 的 橡皮 带 ，(Alt》 能 够 引 
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导 即 将 绘制 路 径 的 方向 和 曲线 ， 同 时 在 检 碍 天 面 板 中 可 以 通过 快捷 方式 完成 锁 氮 编辑 。 

5. 圆 角 算 形 

在 Sketch 中 创建 豆角 和 窍 形 古 很 方便 的 ， 不 但 可 以 直接 控制 四 个 角 圆 角 大 小 ， 也 可 以 双 
击 单个 圆 角 进行 调整 ， 并 且 绾 放 拉 伸 圆 角 年 形 时 ， 圆 角 也 不 会 变形 ， 当 然 Photoshop CC 也 
升级 功能 并 解雇 了 这 个 问题 ， 但 它 的 操作 很 繁琐 。 

6. 方便 的 选择 元 素 

读者 可 以 通过 堪 侧 图 层 和 分 组 栏 ， 看 到 和 天 量 图 形 的 绾 略图 。 有 痢 命 名 规范 的 展 好 习惯 的 
设计 师 ，Sketch 的 搜索 会 让 你 在 寻找 界面 元 系 的 时 候 更 加 快速 ， 并 且 随 着 上 下 点 击 就 会 对 焦 
到 你 选中 的 元 系 。 

7. 测量 工具 

测量 工具 要 比 Photoshop 更 加 便捷 快速 ， 不 再 需要 使 用 蚂蚁 线 或 者 切片 工具 来 测量 元 妹 
与 元 系 之 间 的 距离 。Sketch 为 了 提高 制图 效率 让 设计 更 加 精确 ， 只 需要 在 元 系 中 按 住 《Alt) 
键 ， 然 后 再 用 鼠标 点 选 其 他 元 系 或 者 移动 ， 就 可 以 实时 显示 上 下 左右 之 间 的 距离 。 

8. 轻松 改变 透明 度 

当 需 要 调整 一 个 元 色 的 透明 度 的 时 候 ， 不 需要 去 慢 慢 调节 进度 条 ， 只 需要 选中 图 层 
或 组 ， 使 用 数字 按键 来 设 定 透 明度 ， 比 如 3 束 是 30% 透 明度 ， 这 可 以 非 蜗 方便 快捷 的 更 
改 参数 。 

9. 巧 用 比例 缩放 功能 

当 在 画板 中 创建 的 UI 元 素 大 小 不 符合 期 望 时 ， 假 如 设置 了 一 个 边缘 半径 30px， 边 框 
6px 的 按钮 ， 如 果 和 直接 鼠标 拖 搜 绒 放 ， 效 果 私 怕 不 理想 。 会 造成 边框 不 随 看 面 的 大 小 适时 地 
变 粗 或 者 变 细 ， 如 果 你 点 击 “ 比 例 缩放 Scale )” 按 钮 来 调整 ， 就 可 以 让 边框 随 着 面 的 大 小 
适时 地 调整 ， 比例 协调 地 缩放 。 


2.1.6 Sketch 党 用 快捷 键 汇总 


Sketch 只 能 在 Mac 系统 中 运行 ， 以 下 快捷 键 针 对 苹果 电脑 。 
@ (Ctrl+〉 表 示 与 Windows 系统 本 身 重合 的 命令 ; 

@ 字母 表示 最 单 用 的 命令 ; 

@ (Alt+〉 表 示 相 对 常用 的 命令 ; 

@ (Shiftt〉1 表示 “有 反 ” 命 令 ，2 表示 有 对 话 框 的 命令 。 
快捷 键 如 表 2-1 所 示 : 


表 2-1 
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( 续 ) 
名 组 Cn 
加 GT 
矩形 (R) (Cmd+Alt+-) 
国有 多 加 mar 
直线 (L) (Cmd+Shift+O) 
区 Ca 
新 建 男 板 (A) (Cmd+Shift+、》 
局 部 放大 (Z) (Cmd+Alt+1) 


设计 是 什么 ? 很 多 人 部 会 不 假 趾 索 的 想到 ， 设 计 其 实 束 是 解决 问题 的 一 种 方法 。 这 样 的 
说 法 是 最 为 公认 的 概念 ， 进 一 步 的 讨论 可 以 发 现 ， 根 据 人 们 的 视角 不 同 也 会 对 设计 存在 于 很 
多 不 用 的 理解 。 

作者 认为 设计 其 实 是 一 个 巴 盾 体 。 丈 拿 视觉 设计 来 说 ， 和 仔细 回顾 一 下 在 进行 视觉 设计 的 
功能 工作 流程 就 会 及 现 ， 设 计 和 艺术 最 本 质 的 区 别 是 在 于 “ 目 我 ”与 “他 我 ”的 区 别 。 艺 术 
更 多 是 表现 和 抒发 目 我 的 情感 ， 而 设计 是 为 了 服务 用 户 ， 出 肥 点 不 一 样 决定 了 其 不 同 的 工作 
展开 方式 。 

但 设计 与 艺术 也 有 共同 点 ， 即 都 要 围 纸 一 个 主题 区 进行 发 散 的 思维 ， 每 位 设计 师 根据 同 
一 个 主题 可 以 设计 和 构思 出 不 同 的 设计 结果 ， 这 就 是 设计 比较 抹 烦 的 地 方 了 ， 看 似 没有 一 个 
固定 的 结 有 末 来 约束 和 参考 。 甚 至 可 以 做 一 个 比喻 ， 设 计 更 像 是 “ 珊 着 镶 钳 跳舞 ”， 因 为 视觉 
设计 师 在 进行 创意 表现 的 同时 还 需要 考虑 规范 性 的 束缚 ， 因 为 后 期 设计 师 一 切 的 设计 结果 都 
需要 工程 师 的 开发 来 实现 ， 所 以 才 会 出 现 各 种 不 同 的 设计 规范 和 设计 方式 。 例 如 ， 利 用 参考 
线 进行 创作 的 栅 笠 化 设计 就 是 一 个 典型 的 诠释 〈 图 2-21 )。 

思维 与 创意 本 是 无 形 的 、 开 放 的 其 全 是 无 束缚 的 ， 但 最 终 需 要 落地 ， 以 规范 性 展示 出 
来 ， 这 本 身 台 是 一 个 让 盾 ， 而 设计 的 难点 也 就 在 此 ， 如 何在 满足 用 户 需 求 的 基础 之 上 平衡 这 
两 者 的 矛盾 ， 是 衡量 一 个 视觉 设计 师 非 常 重要 的 标准 。 
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n=24 


n=4 n=11 n=9 


图 2-21 (图 片 出 自 http://www.shejidaren.com/shan-ge-hua-yu-bi-li.html) 


对 比 产 生 视 党 张 力 ， 这 种 手法 是 视觉 设计 非常 重要 的 一 种 手段 《如 图 2-22)， 例 如 ， 在 
进行 文字 排版 过 程 中 会 发 现 ， 当 按照 信息 层级 的 传递 来 区 别 标题 文字 ， 副 标题 文字 以 及 正文 
文字 的 话 ， 使 其 产生 大 小 ， 粗 细 ， 颜 色 甚 至 疏 密 程度 的 变化 ， 文 字 在 传递 过 程 中 就 会 显得 更 
加 有 灵动 性 (图 2-23 )。 
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图 2-22 


何 为 对 比 ? 其 实 具象 一 点 儿 说 便 是 大 与 小 ， 粗 与 细 ， 明 与 暗 以 及 黎 玖 与 密集 之 间 的 罕 
插 ， 实 则 残 是 需要 设计 师 能 够 在 这 些 巴 盾 体 中 来 回 跳 转 ， 寻 求 在 差 寞 化 中 的 一 怪 性 ， 最 终 的 
目的 就 是 要 产生 视觉 张力 。 

对 于 视觉 设计 来 说 ， 很 多 人 部 会 感觉 视觉 设计 看 似 是 没 有 一 个 标准 的 答案 和 规范 来 进行 
束缚 。 而 这 一 点 也 成 了 很 多 视觉 设计 师 在 刚刚 进入 到 这 个 行业 时 阻 枉 其 成 长 的 一 个 非常 国手 
的 问题 。 很 多 的 设计 师 在 初 入 行业 根据 用 户 需 求 进行 创意 表现 的 时 候 ， 婚 发 现 很 难 抛 开 参 考 
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独立 完成 设计 。 为 什么 会 出 现 这 样 的 情况 呢 ? 其 实 原因 很 简单 ， 就 是 因为 缺少 对 于 视觉 设计 

最 本 质 的 分 析 。 甚 至 有 些 工 作 两 年 以 上 的 视觉 设计 师 仍然 无 法 突破 视觉 表现 效果 的 瓶颈 ， 其 
原因 也 是 如 此 ， 就 是 缺乏 对 于 其 技能 深度 的 挖掘 。 
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视觉 设计 有 一 套 非常 有 效 的 方法 ， 下 面 作者 就 给 各 位 介绍 一 下 。 从 而 使 大 家 在 针对 产品 
以 及 用 户 需 求 设计 视觉 表现 的 思路 和 方法 上 变 得 更 加 清晰 。 有 一 套 明确 的 方法 论 来 作为 引导 
一 定 会 比 在 黑暗 中 无 方向 的 摸索 要 更 加 的 有 效 和 轻松 。 

以 移动 界面 为 例 ， 先 来 看 一 些 页 面 效果 〈 图 2-24)。 
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一 一 视觉 营造 的 风 同 标 

通过 图 2-24 的 页 面 可 以 发 现 ， 它 所 展现 出 的 视觉 效果 相对 比较 丰富 。 页 面 的 视觉 设计 
过 程 中 ， 很 多 初级 设计 师 所 面临 最 大 的 困难 ， 束 是 如 何在 平衡 用 户 需求 以 及 开发 的 基础 上 ， 
去 丰 晤 和 优化 界面 的 视觉 效果 。 在 这 个 时 期 确实 是 一 个 不 可 回避 的 难题 。 当 碰 到 一 个 比较 本 
手 的 问题 的 时 候 ， 不 妨 把 这 个 问题 拆 解 成 右 王 的 小 问题 来 去 逐一 解决。 那么 就 能 清晰 地 看 到 
构成 这 个 问题 的 因素 有 哪些 ， 并 且 逐 一 进行 分 析 和 和 总结， 或 许 束 能 够 针对 界面 设计 得 到 一 些 
比较 可 行 的 解决 方案 帮助 进行 视觉 设计 。 

妃 结 一 下 ， 产 品 界 面 的 视觉 设计 其 实 可 以 分 为 以 下 几 个 组 成 部 分 ， 布 局 、 文 字 、 配 色 、 
图 拨 、 图 标 、 线 条 、 细 节 以 及 规范 性 。 也 残 是 说 设计 师 能 够 平衡 好 这 几 个 元 素 ， 根 据 每 一 个 
元 系 都 能 够 建立 起 一 套 有 效 的 方法 论 的 话 ， 那 么 实现 用 户 界 面 的 视觉 效果 束 有 希望 了 。 并 且 
这 些 元 取 在 构成 用 户 界 面 视觉 效果 的 同时 ， 彼 此 之 间 存 在 着 此 消 彼 长 的 “守恒 关系 ” 当 其 
中 的 某 个 元 取消 失 的 时 候 ， 为 了 保持 界面 的 美观 ， 雷 要 设计 师 对 于 剩余 的 视觉 组 成 元 素 的 逆 
造 更 加 深入 才 可 以 。 

举 一 个 形象 的 例子 ， 当 一 套 界 面 设 计 的 视 党 组 成 元 素 全 部 都 消失 ， 只 剩 下 文字 的 话 ， 那 
么 在 这 个 时 候 就 需要 设计 师 能 够 具备 极 蜗 的 文字 排版 以 及 界面 板块 划分 的 能 力 。 这 也 就 是 为 
什么 会 有 “ 越 简单 的 设计 效果 反而 越 难 做 ”的 说 法 ， 例 如 下 面 页 面 中 所 展示 的 视觉 效果 
(图 2-25 )。 
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第 2 章 
决定 设计 的 先决 条 件 
下 面 将 分 别 从 组 成 视觉 元 系 的 各 个 部 分 出 友 为 读者 逐一 分 析 和 解读 ， 来 帮助 设计 师 针 对 

不 同 的 视觉 构 成 元 际 ， 采 用 不 同 的 对 应 方法 ， 从 而 优化 视 党 设计 的 效果 。 
首先 从 利用 到 的 移动 器 布 局 方式 进行 分 机 ， 因 为 布局 方式 大 多 会 在 交互 流程 中 低 保 真 图 
绘制 时 进行 使 用 ， 而 交互 设计 的 低 保 真 图 又 是 视觉 设计 非常 重要 的 衔接 部 分 。 所 以 ， 界 面 布 
局 方式 的 丰富 ， 细 致 非常 重要 。 接 下 来 ， 束 移动 界面 中 第 用 到 的 布局 方式 逐一 介绍 和 分 析 ， 

并 且 会 介绍 对 每 一 种 布局 方式 的 视觉 效果 进行 延展 和 设计 的 好 方法 。 


2.3.1 移动 弄 面 的 布局 万 式 


对 于 移动 应 用 产品 的 定位 、 交 互 设计 以 及 后 期 的 视觉 设计 来 说 ， 布 局 方式 尤其 午 要 。 广 
品 的 前 期 设计 流程 以 用 户 定 位 、 市 场 分 析 、 苋 品 分 析 、 功 能 托 补 以 及 低 你 真 等 流程 组 成 ， 也 
就 是 所 所 到 的 交互 设计 流程 。 那 么 ， 只 有 在 交互 流程 完善 的 基础 之 上 才能 够 顺利 进行 视觉 设 
计 相 关 的 工作 ， 所 以 ， 对 于 这 一 半 节 所 要 所 到 的 布局 方式 束 像 是 人 的 骨骼 一 样 ， 文 撑 起 整个 
页 面 的 信息 展示 区 域 以 及 页 面 信息 传递 的 脉络 (图 2-26)。 
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那么 ， 这 些 布局 方式 最 初 更 多 用 于 交互 阶段 中 低 傈 真 效 末 图 ， 用 于 显示 界面 内 容 的 框 以 
以 及 信息 内 容 摆 放 的 位 置 。 然 后 视觉 设计 师 再 根据 交互 低 保 真 图 的 基础 进行 视觉 效 来 ， 也 右 
是 融 你 真 效 果 图 的 制作 。 框 架 和 布局 好 比 是 骨骼 ， 视 觉 效 来 更 像 皮 肤 和 穿 看 (如 图 2-27)。 
所 以 ， 低 保 真 的 布局 框架 起 着 链接 交互 设计 和 视觉 设计 的 重要 作用 ， 是 每 一 位 视觉 设计 师 都 
必须 要 重点 掌握 的 内 容 。 

本 章 提 到 的 移动 界面 的 布局 方式 ， 主 要 包括 大 平移 陈 布局 、 列 表 陈 布局 、 下 格 陈 布局 、 
侧 滑 式 布局 以 及 标签 式 布局 等 第 用 的 布局 方式 ， 并 且 基 于 这 些 布局 方式 ， 香 点 讲解 如 何 运用 


| 


移动 界面 设计 


一 一 视 党 营造 的 风向 标 

视觉 设计 的 手法 完成 界面 设计 ， 使 其 能 够 更 加 美观 地 展现 在 产品 的 融 保 真 页 面 中 。 本 章 所 所 
到 的 布局 方式 具备 一 些 优点 ， 但 也 会 有 一 些 缺 点 存在 ， 需 要 在 设计 产品 的 过 程 当中 ， 将 这 几 
种 布局 方式 搭配 起 来 使 用 ， 实 现 布 局 方式 功能 上 的 互补 和 优化 ， 从 而 达到 对 信息 的 合理 梳理 
并 快速 传递 给 用 户 ， 从 而 提升 用 户 体验 。 好 的 布局 方式 就 像 储 物 盒 一 样 ， 可 以 更 加 清晰 合理 
的 规划 产品 的 信息 内 容 。 
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a21 
布局 方式 可 以 运用 于 各 种 产品 和 平台 中 ， 但 是 嫁接 在 这 些 布局 方式 基础 之 上 的 视觉 界面 
则 会 随 着 产品 的 用 户 人 群 的 需求 与 特点 、 行 业 的 特征 以 及 产品 的 视觉 形象 而 千变万化 
2.3.2 ”关于 大 平移 式 布 局 


自 完 介绍 一 下 大 平移 式 布局 ， 它 是 移动 界面 中 比较 第 见 的 布局 方式 。 
大 平移 式 布局 主要 是 通过 于 指 横 回 滑动 屏 医 来 租 看 隐藏 信息 的 一 种 交互 方式 〈 疼 2-28)。 


2-28 
由 于 交互 方式 不 断 优 化 ， 用 户 越 来 越 退 求 页 面 信息 量 的 丰 曲 和民 好 的 操作 体验 之 间 的 平 
衡 ， 大 平移 式 布 局 越 来 越 极 设计 师 所 青睐 ， 也 成 了 展示 延展 性 的 隐藏 信息 时 币 使 用 的 布局 方 
式 。 因 为 它 通 过 手指 的 左右 滑动 ， 可 以 模 癌 显示 更 多 的 信息 ， 从 而 有 效 地 解放 了 手机 屏 右 的 
横 癌 显示 。 


下 到 


决定 设计 的 先决 条 件 
对 于 手机 屏 医 来 讲 ， 本 喘 屏 幕 较 小 ， 所 以 页 面 信息 的 广度 更 多 是 在 纵 问 区 域 来 进行 展示 
的 ， 大 平移 式 布 局 的 使 用 使 得 信息 在 手机 屏幕 的 横 同 延展 变 成 了 可 能 ， 非 常 有 效 地 增加 了 手 
机 屏幕 的 使 用 效率 。 
这 种 交互 操作 效果 最 初 是 在 Windows Phone 系统 中 被 频繁 体现 出 来 (图 2-29)。 这 种 设计 
形式 使 页 面 的 层级 结构 变 少 ， 用 户 避 人 免 了 一 次 次 地 在 一 级 和 二 级 页 面 之 间 切 换 。 
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那么 对 于 iOS 平台 来 说 ， 随 看 iOS10 系统 的 逐步 更 新 ， 对 于 手机 屏 右 横 向 空间 的 利用 也 
变 得 更 加 频 索 。 在 新 版 本 Apple Music 当中 ， 将 现 有 的 每 个 信息 卡片 中 的 推送 内 容 变 成 了 以 
大 平移 陈 布 局 为 主 的 左右 滑动 以 浏览 更 多 和 内 容 ， 痊 代 了 原先 每 块 只 展示 一 个 卡片 堆 登 效果 的 
形式 。 

相 比 之 前 的 版 本 ， 将 并 列 的 信息 在 当前 界面 浏览 ， 无 形 中 扩展 了 屏幕 的 空间 ， 减 少 了 由 
于 信息 县 加 过 多 而 造成 用 户 浏 贤 信 息 的 成 本 消耗 ， 使 得 信息 展示 更 加 清晰 ， 容 易 阅 读 ， 也 减 
少 了 页 面 的 跳 转 ， 增 加 了 信息 在 横 同 显 示 的 维度 ， 让 交互 方式 变 得 更 加 的 局 平 (图 2-30)。 
更 多 的 是 针对 所 服务 的 系统 来 进行 第 三 方 应 用 的 设计 和 开发 ， 那 么 随 看 iOS10 的 更 新 ， 大 平 
移 式 布 局 在 产品 中 的 应 用 相信 会 越 来 越 多 (图 2-31)。 
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2.3.3 ”大 平移 式 布局 的 用 途 及 使 用 万 法 


一 切 界 面 的 视觉 设 计 要 以 规范 性 以 及 风格 一 致 性 为 基础 。 对 于 大 平移 式 布局 来 说 主要 将 
其 运用 于 以 下 几 种 情况 : 

首先 是 内 屏 页 ， 又 称 加 载 页 。 当 手机 APP 升级 之 后 ， 用 户 往往 会 看 到 这 个 页 面 ， 当 重 
新 打开 应 用 时 会 友 现 产品 会 围绕 新 功 人 通过 闪 屏 页 来 进行 展示 。 案 例 展示 为 APP 创意 生活 
的 内 屏 页 的 制作 样稿 《〈 图 2-32)。 
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像 这 种 类 型 的 内 屏 页 面 数量 通常 不 能 太 多 ， 因 为 内 屏 页 直接 展示 信息 详情 ， 用 户 只 能 通 
过 手指 横 回 滑动 来 观看 ， 无 法 实现 路 页 面 浏览 。 如 条 页 面 过 多 的 话 ， 会 导致 用 户 心 理 产 和 有 
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面 情绪 从 而 影响 用 户 体验 ， 所 以 其 页 面 数 量 大 多 不 超过 5 张 ， 并 且 页 面 下 方 须 加 入 示意 页 面 
数量 的 控件 加 以 提示 。 
当然 ， 有 些 产 品 也 会 意识 到 这 个 问题 ， 于 是 在 内 屏 页 的 左右 上 和 角 加 入 类 似 “ 跳 过 ”的 控 
件 ， 可 以 忽略 这 个 步骤 ， 直 接 进 入 产品 开始 体验 和 使 用 〈 图 2-33)。 一 般 这 种 情况 下 ， 闪 屏 
页 包含 信息 较 多 ， 往 往 需要 用 户 用 手 请 动 完成 内 屏 页 的 切换 和 跳 转 。 


2 


其 次 古 推 荐 信息 和 定制 方案 的 展示 ， 大 平移 式 布 局 使 页 面 信息 的 模 回 维度 变 得 更 加 元 
容 ， 但 是 在 显示 信息 推荐 卡片 时 由 于 其 交互 方式 以 及 信息 展示 的 局 限 造成 了 查看 每 一 个 信 
娠 卡片 的 时 候 只 能 逐一 查看 ， 无 法 实现 跨 页 查看 ， 所 以 其 显示 的 信息 数量 一 般 较 少 ( 如 
图 2-34)。 
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对 于 一 些小 而 精 的 信息 可 以 考虑 使 用 大 平移 式 布局 ， 比 如 定制 型 的 信息 推送 ， 如 今 APP 
的 个 性 化 定制 已 经 形成 一 个 非常 成 熟 的 设计 思维 ， 例 如 “Boss 直 聘 ”以 及 “Apple Music” 
都 会 通过 产品 调研 用 户 的 具体 需求 来 推荐 和 用 户 匹配 度 极 高 的 信息 供用 户 来 选择 ， 从 而 提升 
用 户 体 验 。 

“Boss 直 聘 ”中 的 “快速 匹配 ”功能 即 是 如 此 ， 该 功能 会 从 很 多 的 招聘 信息 中 筛选 出 和 
用 户 匹 配 度 极 高 的 招聘 企业 信息 来 推送 给 用 户 ， 从 而 增加 应 聘 成 功率 。 每 天 智能 推送 20 条 
言 轧 ， 不 会 因 信息 过 多 而 造成 用 户 阅 读 信息 时 的 厌烦 情绪 ， 有 很 多 类 似 的 APP 也 是 这 么 做 
的 。“ 爱 食 记 ”手机 APP， 是 正在 开发 的 一 套 020 订餐 类 型 的 产品 ， 其 中 这 一 页 展示 的 就 是 
餐 品 推送 页 面 〈 如 图 2-35)。 

一 般 在 设计 大 平移 式 布局 的 时 候 ， 主 要 根据 卡片 式 设计 手法 进行 设计 ， 这 样 会 给 用 户 一 
种 现实 操作 感 ， 残 像 是 在 真实 滑动 一 张 张 的 卡片 似 的 ， 体 验 感 会 更 加 优化 。 

那么 在 设计 大 平移 动 式 的 卡片 的 时 候 ， 最 好 是 能 够 考虑 到 圆 角 的 大 小 以 及 投影 等 各 个 参 
数 的 效果 ， 以 使 视觉 设计 更 加 优化 。 

首先 ， 如 条 针对 的 是 iOS 平台 的 话 ， 圆 角 大 小 建议 控制 在 5pt 以 内 ， 如 果 是 Android 
的 话 ， 那 束 按 照 Materail Design 的 要 求 ， 卡 片 贺 角 统一 成 2dp 即 可 。 对 于 投影 来 讲 ， 最 
好 是 90” 的 投影 方向 ， 投 影 的 效果 最 好 不 要 太 过 于 明显 。 在 针对 卡片 进行 设计 的 时 候 还 
需要 考虑 到 卡片 中 内 容 所 放置 的 区 域 ， 大 致 去 抒 圆 角 范 围 以 内 的 区 域 就 是 可 以 放置 信息 
的 合理 区 域 (如 图 2-36)。 按 照 这 样 的 思维 可 以 结合 产品 的 需求 设计 出 效果 出 众 的 大 平 
移 式 页 面 。( 如 图 2-37) 
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2.3.4 大 平移 却 布局 的 优 缺 点 


a) 以 展示 推荐 类 信息 为 主 ， 可 以 结合 卡 厂 的 设计 手法 来 展示 大 平移 的 视 沉 效果， 推荐 
信息 ， 个 性 定制 推送 信息 ， 功 能 展示 性 卡 厂 时 更 多 会 被 用 到 。 

b) 减少 页 面 跳 园 ， 操 作 简 单 易 上 手 ， 只 需 根据 左右 滑动 即 可 完成 操作 ， 奉 看 更 多 信息 。 

大 平移 式 布局 本 时 也 人 存在 一 些 缺 点 ， 主 要 表现 在 信息 展示 的 数量 不 可 过 多 ， 无 法 实 
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一 一 视 党 营造 的 风 同 标 

现 浏览 信息 卡 户 时 的 路 页 跳 园 ， 合 则 会 使 得 用 户 在 浏览 信息 时 产生 厌烦 情绪 。 所 以 需要 
能 够 结合 其 他 的 布局 方式 来 进行 弥补 ， 比 如 在 大 平移 式 布局 页 面 中 加 入 缩 略 信息 来 帮助 
页 面 的 快速 跳 转 ， 以 弥补 大 平移 式 布局 本 身 融 来 的 不 便 。 所 以 ， 最 好 是 当 推 送信 息 少 而 
精 的 时 候 使 用 大 平移 式 布局 。 


随 者 镶 能 手机 的 快速 普及 ， 很 多 互联 网 工作 者 也 开始 逐 源 由 PC 闹 为 主导 的 网 页 设计 癌 
移动 界面 设计 转型 。 以 界面 视觉 设 计 师 为 例 ， 当 设计 师 逐 步 从 已 经 形 成 意识 与 习惯 的 网 页 设 
计 的 工作 方式 转化 为 移动 界面 设计 的 时 候 ， 很 多 认 知 都 要 发 生 巨 大 的 转变 ， 比 如 产品 思维 、 
交互 方式 以 及 设计 规范 等 。 但 是 ， 也 有 一 些 设计 方法 被 很 好 的 保留 与 继承 下 来 ， 继 续 在 移动 
界面 设计 中 充当 重要 的 角色 。 

台 格 却 布 局 吏 是 其 中 之 一 ， 豆 格式 布局 是 指 以 窍 形 卡 片 为 划分 的 页 面 布 局 效 末 ， 通 
过 九 品 格 、 六 定格 、 四 定格 、 八 品格 等 方式 传递 信息 (如 图 2-38 )。 
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号 格式 布局 大 致 可 分 为 规则 和 不 规则 的 两 种 形态 进行 展示 (如 图 2-39)， 主 要 用 来 传递 
以 图 片 、 视 频 和 功能 分 类 为 主 的 信息 。 这 种 布局 方式 可 以 单独 形成 一 页 的 布局 ， 也 可 以 做 为 
页 面 布局 的 一 部 分 和 其 他 布局 方式 进行 配合 使 用 。 

号 格式 布局 是 由 网 页 设计 中 的 以 展示 图 文 列表 页 为 主 的 布局 方式 逐步 演变 到 了 移动 界面 
中 ， 并 且 成 为 最 主要 也 是 最 第 用 到 的 布局 方式 ， 同 时 也 可 以 被 很 多 初级 的 手机 应 用 的 用 户 所 
掌握 ， 从 而 在 产品 设计 过 程 中 付出 很 低 的 学 习 成 本 便 可 以 轻松 操作 。 所 以 ， 宫 格式 布局 非常 
适合 各 种 初级 用 户 使 用 。 宫 格式 布局 在 现 有 有 的 三 大 移动 端 系统 平台 中 被 频 或 使用， 在 iOS 和 
Android 的 Material Design 中 ， 宫 格 更 多 以 信息 卡片 的 形式 出 现 〈( 如 图 2-40)。 
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前 文 提 到 ， 富 格式 布局 是 最 常见 的 一 种 布局 方式 ， 也 是 符合 用 户 习惯 和 黄金 比例 的 设计 
方式 。 在 各 种 第 三 方 开发 的 安 卓 系统 中 ， 锤 子 科技 开 发 的 Smartisan OS 采用 宫 格式 布局 作为 
其 系统 设计 语言 中 经 典 元 素 被 大 家 熟知 (如 图 2-41)。 
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例如 锤子 ROM 的 时 面 启动 器 (Launcher) 束 是 主 逐 单 ， 通 过 这 单 键 进 束 能 进入 管理 图 
标的 界面 ， 可 以 显示 36 个 应 用 程序 ， 这 样 一 来 ， 在 不 同 分 页 之 间 挪 动 图 标 变 得 更 简单 ， 并 
且 支 持 整 屏 隐 藏 应 用 图 标 。 不 过 纵 观 现 有 手机 界面 ， 这 样 的 36 宫 格 很 少见 。 

再 来 看 微软 的 Windows Phone。 在 Windows Phone 系统 中 ， 以 动态 磁 贴 〈 以 矩形 色 块 为 
主 的 功能 信息 模块 ) 为 主 的 视觉 设计 风格 给 人 们 眼前 一 亮 的 感 党 ， 结 合 忆 平 化 风格 以 及 栅 格 
化 设计 手法 也 给 宫 格 式 布局 的 设计 融入 了 新 的 设计 语言 ， 后 来 这 种 设计 语言 也 被 使 用 到 了 
2012 年 微软 推出 的 Window 8 系统 中 ， 从 而 被 更 多 的 用 户 认 识 和 学 习 《〈 如 网 2-42)。 
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不 可 人 否认 的 是 ，Windows Phone 的 设计 语言 将 局 平 化 设计 市 入 了 互联 网 视觉 设计 的 范畴 
中 ， 并 逐步 成 为 现今 主要 的 视觉 设计 方式 ， 也 一 度 成 为 丰富 和 美化 界面 设计 的 主要 设计 手法 
Pd 


EE 
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以 上 是 对 富 格式 布局 发 展 及 应 用 的 介绍 ， 下 面 将 就 如 何 将 视觉 设计 的 手法 融入 富 格式 布 
局 设计 ， 给 大 家 列举 一 些 方法 。 


2.4.1 宫 格 式 布局 的 视 党 表现 万 式 


访 格 式 布局 主要 用 来 展示 图 片 、 视 频 列表 页 以 及 功能 页 面 。 所 以 ， 品 格式 布局 更 多 的 会 
使 用 经 典 的 信息 卡片 、 图 文 混 排 的 方式 来 进行 视觉 设计 ， 同 时 也 可 以 结合 栅 格 化 设计 进行 不 
规则 的 宫 格 式 布 局 ， 实 现 “ 照 片 墙 ”的 设计 效果 。 

自 先是 品格 式 布局 与 卡片 的 结合 ， 这 种 方式 经 党 被 视 谢 设计 师 采 纳 。 那 么 ， 融 入 信息 卡 
片 〈Paper Design) 将 会 给 视 沉 设计 融 来 什么 呢 ? 

站 先 会 使 得 信息 卡片 和 界面 背景 分 离 ， 使 定格 更 加 清晰 ， 同 时 也 可 以 丰富 界 面 设计 ， 不 
过 有 时 候 卡 厂 会 同时 容纳 一 个 品格 的 图 厂 信 息 和 文字 介绍 ， 但 有 时 候 也 只 容纳 图 片 ， 将 该 图 
厂 的 文字 摘 述 放置 在 卡 厂 之 外 ， 结 合 图 2-43 来 看 一 下 这 两 种 效 末 。 
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读者 可 以 发 现 ， 结 合 了 卡片 的 定格 式 设计 可 以 将 页 面 的 视觉 层级 变 得 更 加 清晰 ， 
为 卡 厂 的 闫 色 和 投影 效果 可 以 给 用 户 一 种 真实 的 将 卡 厂 放 在 手机 屏 秦 上 的 感觉 ， 在 提升 
了 用 户 用 手指 点 击 欲 望 的 同时 ， 也 增加 了 画面 的 细节 以 及 视觉 元 素 ， 起 到 丰 宇 界面 视觉 
效果 的 作用 。 

那么 对 于 卡片 的 设计 要 求 ， 需 要 注意 以 下 三 点 :首先 是 卡片 的 圆 角 使 用 ， 如 果 针 对 的 是 
iOS 平台 的 话 ， 圆 角 大 小 建议 控制 在 5pt 以 内 ， 如 采 是 安 旱 的话， 那 焉 按照 Materail Design 
的 要 求 ， 卡 卢 圆 角 统 一 成 2dp 即 可 。 其 次 是 投影 的 效果 ， 对 于 投影 来 讲 ， 最 好 是 90” 的 投影 
方 回 ， 投 影 的 效果 不 要 太 过 于 明显 。 最 后 ， 对 于 卡片 的 颜色 选择 ， 卡 片 放置 在 背景 上 面 的 时 
候 ， 卡 片 的 颜色 最 好 不 要 比 背 景 的 颜色 更 深 ， 因 为 元 素 离 得 越 近 的 话 ， 那 么 它 就 应 该 越 明 
显 ， 这 样 才 会 比较 符合 用 户 视 党 识 列 的 习惯 〈 如 网 2-44)。 
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1. 栅 格 化 设计 模式 下 的 宫 格 式 布局 

这 种 设计 方式 的 灵感 最 初 来 源 于 Windows Phone 系统 的 设计 语言 ， 意 在 通过 栅 格 的 划 
分 ， 以 及 栅 格 的 合并 与 拆 分 构成 界面 中 不 规则 的 吾 格 划分 效果 ， 可 以 使 界面 变 得 更 加 丰 军 ， 
那么 栅 格 化 设计 随 看 HTMLS 的 大 行 其 道 ， 也 被 越 来 越 多 的 运用 到 了 网 页 设计 中 来 进行 展 
示 ， 以 12 栅 格 的 划分 方式 为 主 ( 如 图 2-45 )。 
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图 2-45 中 展示 的 是 作者 团队 设计 的 企业 网 站 的 样稿 ， 其 中 便 用 到 了 栅 格 化 设计 的 方 
法 ， 可 以 发 现 界 面 中 的 矩形 元 素 就 是 由 这 12 个 栅 格 所 划分 出 来 的 区 域 进行 有 序 的 合并 之 后 
产生 的 视觉 效 末 ， 既 丰富 了 国 面 ， 也 会 避免 画面 的 次 乱 无 序 。 

这 种 方法 在 手机 界面 设计 中 也 在 使 用 ， 只 是 手机 界面 相对 网 页 来 说 显得 更 小 ， 不 可 能 在 
手机 界面 中 划分 12 栅 格 来 进行 设计 ， 所 以 通常 使 用 6 栅 格 ， 或 者 3 栅 格 来 进行 使 用 ， 也 是 
为 了 保证 每 一 个 信息 模块 的 手指 点 击 区 域 。 图 2-46 所 示 是 栅 格 化 设计 运用 在 手机 界面 中 所 
展示 到 的 品格 式 布 局 效果 。 
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2. 瀑布 流 的 展示 

瀑布 流 最 初 是 运用 在 网 站 设计 中 的 一 种 图 文 列表 页 面 的 设计 方式 ， 在 电子 商城 中 展示 产 
品 列表 比较 常见 。 其 主要 特点 便 是 通过 所 展示 的 图 片 让 用 户 身 临 其 境 。 浏 览 网 站 的 时 候 只 需 
要 滑动 一 下 鼠标 深 轮 ， 便 可 以 查看 所 有 的 产品 图 片 ， 例 如 美丽 说 、 花 瓣 网 这 类 型 的 网 站 便 是 
典型 的 泽 布 流 效果 网 站 。 

在 设计 手机 界面 的 时 候 ， 这 种 瀑布 流 的 效果 也 开始 不 断 的 运用 其 中 (如 图 2-47)。 瀑 布 
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沈 在 手机 移动 界面 设计 中 也 比较 第 见 ， 其 中 两 列 的 使 用 次 数 较 多 ， 三 列 较 少 如 图 2-48)。 
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瀑布 流 对 于 产品 图 片 的 展现 ， 是 高 效 的 ， 其 快速 阅读 的 模式 可 以 在 短 时 间 内 让 用 户 获得 
更 多 的 信息 。 在 网 页 设计 中 使 用 瀑布 流 中 其 懒 加 载 模式 (下 拉 刷 新 ) 又 避免 了 用 户 鼠 标点 击 
的 翻 页 操作 ， 节 省 了 用 户 的 操作 成 本 ， 在 手机 移动 界面 中 也 保留 了 这 样 的 操作 方式 。 
瀑布 流 的 主要 特性 是 上 下 错落 有 致 ， 确 定 宽度 而 不 确定 高 度 的 设计 让 页 面 巧妙 地 利用 视 


下 


决定 设计 的 先决 条 件 
觉 层级 ， 在 丰富 画面 的 同时 还 可 以 缓解 视觉 疫 劳 ， 同 时 给 用 户 一 种 别 样 的 体验 。 相 对 于 富 格 
式 布局 来 讲 ， 其 易 用 性 的 特点 成 为 用 户 最 喜爱 的 操作 方式 ， 同 时 也 是 设计 师 经 常 使 用 的 界面 
布局 方式 。 


2.4.2 ”号 格式 布局 的 优 缺 后 


@ 布局 效果 简单， 信息 传递 朋 观 ， 极 易 操 作 ， 适 合 初级 用 户 的 使 用 。 

@ 丰富 页 面 的 同时 ， 展 示 的 信息 量 极 大 ， 是 图 文 检索 页 面 设计 中 最 主要 的 设计 方式 

虽 格 式 布局 的 缺点 在 于 其 展示 的 是 以 检索 页 面 为 主 的 信息 内 容 ， 本 里 信息 量 已 大 而 造成 
了 用 户 在 碍 找 具 体 信 息 的 相对 比较 困难 ， 所 以 需要 结合 其 他 的 布局 方式 来 进行 功能 上 的 弥补 
和 配合 ， 但 是 不 容 人 否认 ， 品 格式 布局 依然 是 界面 设计 中 不 可 和 急 视 的 布局 方式 之 一 。 


侧 滑 式 布 局 ， 也 称 作 侧 请 染 单 ， 是 一 种 在 移动 页 面 设计 中 频 索 使 用 的 用 于 信息 展示 的 布 
局 方式 ， 不 管 是 事务 类 型 的 APP， 还 是 效率 或 者 生活 类 APP， 采 用 侧 滑 陈 布局 都 比较 第 见 。 
而 且 ， 侧 滑 式 布局 也 因为 Path 2.0 以 及 Facebook 为 很 多 开发 者 所 熟知 。 

如 果 说 ， 宫 格式 布局 是 从 网 页 时 代 就 开始 出 现 ， 之 后 通过 网 页 设计 影响 到 手机 移动 界面 
设计 的 话 ， 那 么 ， 侧 请 陈 布局 可 以 说 是 根据 手机 屏幕 的 特点 影响 到 视觉 设计 的 布局 方式 。 

手机 界面 的 侧 滑 式 布 局 大 多 是 通过 点 击 图 标 碍 看 隐藏 信息 的 一 种 方式 ， 在 侧 请 式 布局 中 
通常 会 有 一 个 按钮 ， 就 是 “汉堡 包 ” 按 钮 (如 图 2-49 所 示 )。 


汉堡 包 按 包 


2-49 
通过 使 用 手机 APP 能 够 及 现 ， 侧 靖 式 布局 的 视 党 效 末 通 和 党 是 通过 一 个 图 标的 点 击 来 进 


行 呼唤 的 ， 那 么 为 什么 侧 清 却 布局 在 手机 界面 中 显得 如 此 重要 和 独特 呢 ? 这 婚 需 要 再 次 总 结 
一 下 手机 界面 的 特点 了 ， 因 为 对 于 移动 端 手机 界面 来 次， 不论 是 使 用 的 场景 、 交 互 方式 媒介 
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一 一 视 党 营造 的 风 同 标 
以 及 产品 界面 的 规范 性 部 有 奢 明 显 的 区 列 。 


2.5.1 手机 弄 面 的 特 后 


@ 于 机 界面 小 而 精致 、 吻 操作 ， 所 以 需要 设计 师 在 信息 展示 、 视 觉 效 末 以 及 人 机 交互 
体验 这 三 方面 寻求 一 个 平衡 点 。 

@ 要 车 重用 户 操作 习惯 ， 尽 可 能 减少 用 户 的 学 习 及 操作 成 本 。 

@ 要 你 持 产 品 设计 版 本 的 风格 以 及 控件 规范 的 一 致 性 。 

@ 于 机 界面 的 刷新 方式 以 “页 面 刷 新 ”为 主 。 

由 于 手机 界面 使 用 场景 碎片 化 严重 ， 并 且 现 有 的 手机 界面 的 屏幕 太 寸 大 多 在 4.0 一 5.5 英 
十 之 间 ， 以 单 手 操 作为 主 ， 所 以 需要 在 信息 展示 需求 大 和 手机 界面 俩 小 这 两 者 之 间 找 到 一 个 
合理 地 解决 方案 。 


2.5.2 ” 侧 靖 却 布 局 简介 


侧 滑 式 布局 恰恰 可 以 为 手机 界面 设计 提供 合理 的 解决 方案 。 例 如 QQ 音乐 和 酷 狗 音乐 ， 
其 产品 中 的 个 人 中 心 功能 需要 出 现在 省 页， 并 配合 首页 的 其 他 功能 使 用 ， 但 是 手机 的 界面 相 
对 较 小 ， 并 且 大 多 是 竖 屏 使 用 。 所 以 无 法 在 首页 的 区 域 加 入 个 人 中 心 这 样 庞大 而 复杂 的 功 
能 ， 这 个 时 候 融 需要 氮 击 个 人 中 心 图 标 或 “汉堡包 ”图 标 ， 通 过 侧 请 式 荣 单 的 出 现 隐藏 之 前 
的 页 面 ， 从 而 展示 新 的 页 面 〈 如 图 2-50)。 
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侧 请 陈 布 局 更 像 是 一 局 推拉 门 ， 通 过 点 击 图 标 展示 的 信息 布局 效果 ， 其 展示 的 和 内容 
一 定 是 和 当前 页 面 或 者 当前 产品 密切 相关 ， 而 当前 页 面 又 无 法 容纳 的 信息 群 或 一 些 辅助 
功能 。 

使 用 侧 滑 陈 布 局 可 以 及 现 ， 它 极 大 地 减少 了 页 面 的 跳 转 及 页 面 长 度 ， 在 页 面 展示 信息 的 
深度 和 广度 方面 达到 了 平衡 。 这 古 因为 对 于 同样 大 小 的 一 块 区域 它 可 以 利用 两 次 展示 不 同 的 
信息 ， 基 于 这 一 点 ， 侧 滑 荣 单 的 这 种 布局 方式 成 为 手机 界面 中 不 可 缺失 的 一 种 重要 的 布局 方 
式 。 但 是 ， 侧 滑 采 单 需 要 手指 点 击 图 标 后 才能 看 到 具体 展示 的 信息 ， 所 以 这 种 布局 方式 所 展 
示 出 来 的 信息 属于 典型 的 隐藏 信息 ， 需 要 用 户 建 立 在 了 解 产 品 的 基础 之 上 和 才 可 以 顺利 完成 操 
作 ， 所 以 用 户 需 要 付出 一 些 学 习 成 本 才能 发 现 这 一 功能 。 

因此 很 多 用 户 初 次 使 用 APP 时 ， 都 会 把 当前 调 取 侧 清 布 局 的 按钮 显示 得 非 负 明显 ， 以 
引起 用 户 的 注意 ， 比 如 提示 性 的 语言 或 者 结合 动 男 效 来 等 方式 来 实现 。 侧 请 式 布 局 并 不 只 是 
使 用 在 手机 页 面 的 布局 方式 ，Pad 端 经 名 使 用 侧 滑 陈 布局 ， 由 于 平板 电脑 的 使 用 更 多 以 水 平 
方 癌 为 主 ， 所 以 阶 柳 式 或 者 层级 卡片 陈 布局 成 为 了 平板 电脑 界面 布局 的 特点 。 以 iPad 为 
例 ， 在 其 控件 中 有 一 个 叫做 “ 侧 边 栏 ” 的 控件 ， 是 用 来 展示 页 面 的 主要 功能 集合 的 一 个 常用 
控件 ， 其 功能 与 所 看 到 的 侧 请 却 布 局 非常 相似 ， 最 左 亡 的 紧 导 航 便 是 侧 滑 栏 的 视觉 效 末 《如 
图 2-51)。 
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对 于 侧 滑 陈 布局 来 说 ， 点 击 呼唤 出 隐藏 信息 是 最 典型 的 交互 方式 ， 大 多 数 情况 ， 从 正 往 
右 进 行 侧 滑 的 方式 比较 第 抑 ， 从 右 往 无 的 侧 滑 也 有 ， 不 过 较 少 ， 这 主要 是 要 考虑 到 于 机 操 击 
的 习惯 以 及 从 磊 问 右 进 行 侧 滑 的 效果 比较 符合 用 户 的 使 用 习惯 。 

那么 在 侧 剖 荣 单 出 现 以 后 ， 之 前 显示 在 屏 才 中 的 页 面 就 会 像 推 拉 门 的 效果 一 样 ， 往 堪 侧 清 
并 消失 到 只 显示 一 小 部 分 。 总 结 一 下 ， 侧 滑 却 布 局 通 单 会 以 这 几 种 效果 为 主 〈 如 网 2-52)。 
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侧 滑 


侧 背 


显示 区 域 显示 区 . 域 显示 区 域 


显示 区 域 


= 


这 几 种 效果 ， 有 使 用 推拉 门 效 果 的 ， 也 有 使 用 景深 效果 的 ， 甚 至 有 些 还 会 给 已 经 被 隐藏 
的 原 页 面 加 入 投影 来 展示 元 素 的 层级 关系 。 不 管用 什么 方法 ， 都 可 以 清楚 的 看 到 ， 当 侧 滑 效 
果 被 呼唤 出 来 的 时 候 ， 要 让 侧 滑 显示 区 域 与 原先 的 页 面 之 间 产 生 很 大 的 区 别 ， 普 裔 的 侧 滑 羡 
单 均 是 如 此 。 

区 别 主要 表现 在 显示 区 域 以 及 显示 区 域 背 景色 这 两 部 分 。 首 先 ， 侧 滑 菜单 区 域 要 占据 当 
前 屏幕 的 绝对 主导 ，( 如 图 2-53)。 


侧重 


显示 区 域 
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其 次 ， 从 视觉 上 来 说 ， 侧 滑 式 布局 所 产生 的 侧 请 菜单 ， 最 好 使 其 背景 色 和 原 页 面 能 够 产 
生 层 级 上 的 变化 ， 这 样 的 话 ， 信 息 传 递 才 会 有 一 个 明确 的 优先 天 系 。 一 般 的 视觉 营造 手法 是 
将 两 者 区 分 开 来 ， 假 如 原 页 面 的 背景 色 是 以 浅 色 为 主 ， 那 么 侧 请 某 单 的 背景 色 最 好 使 用 深 色 
来 代替 或 者 使 用 投影 来 区 分 两 者 之 间 的 关系 “如 图 2-54)。 

在 本 章 开 始 的 时 候 也 所 到 过 ， 对 于 现 有 的 各 种 布局 方式 来 说 ， 每 一 种 布局 方式 都 有 其 优 
缺点 ， 所 以 ， 这 些 布局 方式 需要 配合 使 用 ， 会 更 方便 信息 在 产品 中 的 规划 与 传递 。 

下 面 ， 举 一 个 利用 侧 请 菜单 的 过 例 。 当 设计 侧 滑 荣 单 显 示 到 个 人 中 心 的 时 候 ， 可 以 结合 
列表 或 者 豆 格 式 排 布 来 展示 当前 个 人 中 心中 的 一 些 设 置 选项 和 功能 ， 这 样 既 可 以 丰 调 画面 ， 
也 可 以 让 产品 传递 信息 时 更 加 的 清晰 以 及 易 操 作 〈 如 图 2-55 )。 
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图 2-55 束 是 列表 式 布 局 和 怕 格 式 布局 在 侧 滑 荣 单 中 的 一 个 应 用 的 实际 和 案例。 所 以 ， 不 
同 布局 方式 的 混合 使 用 ， 在 功能 上 实现 互补 ， 在 视觉 上 更 加 丰富 ， 才 古筝 握 界 面 布 局 方式 的 
真实 目的 。 
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侧 滑 却 布 局 主要 是 运用 在 需要 展示 隐藏 功能 或 者 信息 群 的 时 候 ， 那 么 侧 滑 陈 布局 的 优 缺 
点 有 哪些 呢 ? 


2.5.3 侧 消 陈 布 局 的 优 缺 点 


减少 夫 面 跳 转 和 信息 延展 性 强 是 侧 滑 式 布局 的 最 大 优势 。 其 次 ， 访 布局 方式 也 可 以 更 好 
地 平衡 当前 页 面 的 信息 广度 和 深度 之 间 的 关系 。 侧 滑 式 布局 所 展现 出 来 的 信息 ， 也 就 是 所 说 
的 侧 汕 菜单， 在 操作 之 前 并 没有 显示 在 当前 页 面 。 所 以 ， 侧 滑 陈 布局 展示 的 内 容 属于 隐藏 信 
恩 ， 需 要 产品 对 于 当前 功能 给 予 用 户 一些 担 示 ， 以 减少 用 户 的 学 习 成 本 。 对 于 侧 请 式 布局 的 
展示 效果 也 是 很 多 设计 师 一 直 在 重点 发 掘 的 ， 以 增加 一 些 交 互 上 的 新 意 或 趣味 性 ， 主 要 也 是 
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一 一 视觉 营造 的 风 同 标 

为 了 提升 用 户 体 验 。 因 为 对 于 视觉 设计 来 说 ， 如 果 只 完成 视觉 效果 ， 不 考虑 交互 和 动 效 是 不 
完整 的 。 所 以 现在 越 来 越 多 的 公司 在 视 党 设计 和 开发 之 间 会 加 入 动 效 设 计 这 样 的 流程 来 针对 
产品 页 面 以 及 控件 之 间 的 跳 转 进行 设计 。 在 实现 侧 滑 式 布局 交互 效果 时 ， 比 如 折纸 效果 ， 弹 
性 效 朱 或 者 是 翻 页 动画 效 朱 等 都 是 侧 清 式 布局 经 钊 会 使 用 到 的 动 效 展示 《〈 如 疼 2-56)。 
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以 上 所 展示 到 的 便 是 侧 滑 式 布局 动 效 静态 页 面 的 展示 效果 ， 布 望 视觉 设计 师 在 设计 页 面 
效果 的 同时 也 可 以 考虑 到 动 效 的 展示 ， 给 用 户 一 个 全 方位 体验 。 


坚 排 列表 式 布 局 是 手机 界面 布局 方式 中 最 常用 的 布局 之 一 。 正 如 前 面 所 说 到 的 宫 格 式 布 
局 ， 列 表 在 移动 界面 设计 和 交互 布局 中 占 的 比重 非常 高 ， 包 括 表 单列 表 、 信 息 综合 展示 列 
表 、 菜 单 栏目 列表 、 对 话 列 表 、 功 能 整合 列表 、 数 据 展示 型 列表 等 等 。 那 么 在 不 同 的 情况 下 
以 及 不 同 的 信息 内 容 特点 下 该 如 何 呈 现 列 表 式 视觉 设计 才 算 是 较 出 色 的 设计 ? 下 面 将 对 于 列 
表 式 布局 的 设计 分 享 一 些 经 验 之 谈 《〈 如 图 2-57)。 
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手机 的 列表 式 布局 可 以 很 好 地 利用 每 一 块 手机 屏幕 。 众 所 周知 ， 目 从 大 屏 智 能 手机 开 

始 兴起 ， 易 用 高 效 是 用 户 体验 的 最 基本 要 求 。 相 较 于 PC 端 网 页 ， 手 机 的 屏幕 仍然 是 很 小 

的 。 市 场 中 普 允 流行 的 智能 手机 和 平板 第 见 尺 寸 为 4 一 12 英寸 左右 ， 芋 果 专 业 级 平板 电脑 

iPad pro 也 只 有 12.9 英寸 。 手 机 尺寸 更 小 ， 一 般 常 见 的 手机 屏幕 尺寸 在 4.0 一 5.5 英寸 之 

间 ， 而 PC 显示 器 的 常见 尺寸 为 13 英寸 以 上 ， 所 以 手机 的 使 用 环境 和 用 户 体验 较 PC 端 有 
着 明显 的 区 别 。 

列表 式 布局 通常 都 会 把 屏幕 划分 成 若干 等 距 的 矩形 来 显示 集群 式 的 缩 略 信息 ， 就 像 是 宫 

格式 布局 ， 列 表 式 布局 主要 用 于 显示 导航 分 类 或 者 二 级 页 面 的 缩 略 信息 。 二 者 区 别 在 于 ， 二 

级 页 面 中 的 宫 格 式 布 局 主要 是 用 于 展示 以 图 片 信息 为 主导 的 缩 略 内 容 ， 而 列表 式 布 局 适合 

展示 以 文字 为 主 或 信息 标题 为 主 的 一 些 缩 略 信息 。 例 如 新 闻 列 表 、 联 系 人 列表 、 聊 天 列 


表 等 。 
2.6.1 ”列表 式 布 局 的 特点 
1) 信息 构成 模式 一 致 


2) 信息 展示 内 容 较 少 且 以 文字 为 主 的 展示 信息 占 主导 ; 
3) 模块 化 展示 信息 较 多 (如 图 2-58)。 
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2.6.2 ”列表 却 布 局 的 设计 方式 


第 见 的 列表 云 布 局 主要 由 信息 标题 为 主导 按 目 上 而 下 的 顺序 排列 展示 ， 非 党 适合 初级 于 
机 用 户 操作 和 使 用 。 可 以 次 ， 列 表 陈 布局 从 低 保 真 角度 来 说 非 党 简单， 但 是 当 需 要 根据 用 户 
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一 一 视觉 营造 的 风向 标 
特 皮 、 行 业 以 及 企业 形象 和 产品 风格 进行 局 你 真 视觉 设计 时 ， 这 种 设计 模式 束 变 得 不 合适 
了 。 因 为 对 于 一 名 合格 的 视觉 设计 师 来 讲 ， 把 交互 低 保 真 图 的 产品 骨架 变 成 蝇 你 真 效 来 的 过 
程 是 一 种 重要 的 能 力 ， 它 需要 考验 设计 师 对 于 规范 性 、 文 字 排 版 、 信 息 版 面 划 分 以 及 图 文 搭 
配 和 细节 把 控 等 综合 能 力 。 下 面 来 介绍 一 些 制作 列表 式 布局 的 好 方法 。 

1. 一 切 青 面 设计 都 要 建立 在 规范 性 的 基础 之 上 

在 界面 设计 中 规范 性 是 非 第 基本 又 非常 重要 的 准则 。 对 于 一 名 视觉 设 师 来 说 ， 不 论 是 平 
面 设 计 还 是 界面 设计 ， 设 计 规 范 性 的 把 控 是 非常 基本 的 设计 意识 要 求 。 

很 多 成 熟 的 设计 师 会 在 制作 效果 图 之 前 或 者 在 制作 高 保 真 效 来 图 的 时 候 下 意识 想到 的 一 
个 国 面 ， 设 计 元 素 之 间 的 间距 把 控 和 调整 是 春 面 视 党 设计 最 基本 的 有 要求 。 因 为 对 于 一 亚 产 品 
来 讲 ， 当 视觉 设计 完成 之 后 ， 要 进行 开发 与 功能 的 实现 ， 所 以 对 于 像素 的 规范 性 设计 是 必要 
的 ， 所 谓 设计 师 的 “像素 眼 ” 吕 是 这 个 道理 。 

同类 型 的 元 妹 与 视觉 元 素 的 边 距 关系 应 该 保持 一 致 ， 例 如 图 2-59 中 的 “a” 间 距 一 致 ， 
应 该 把 列表 中 的 元 际 水 平 居中 对 齐 ， 也 就 是 列表 内 容 中 的 圆 形 头像 区 域 以 及 最 右 侧 角 标 文 字 
与 列表 边缘 的 距离 要 保持 一 致 。 代 表 上 下 间距 的 “b” 和 “c” 意 思 是 一 样 的 道理 ， 也 就 是 
次 ， 列 表 中 的 文字 和 疼 片 信息 要 相对 于 列表 本 身 要 进行 水 平和 垂 御 的 居中 对 齐 ， 这 惑 是 在 规 
江 性 约束 下 的 界面 设计 ， 这 是 视觉 设计 中 最 基本 的 要 求 。 
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2. 合理 规划 视觉 元 素 ， 搞 清 元 素 的 群集 关系 
就 像 是 本 章 一 开始 提 到 的 ， 视 觉 设 计 其 实 就 是 在 规范 性 的 基础 上 ， 对 于 视 党 元 素 的 规划 
和 把 控 ， 例 如 列表 式 布 局 ， 束 讲究 元 系 之 间 的 合理 把 控 以 及 集群 天 系 〈 如 图 2-60)。 


2-60 


图 2-60 中 的 视觉 元 素 可 以 分 为 贺 形 图 厂区 域 、 主 标题 区 域 、 副 标题 区 域 以 及 角 标 区 域 
四 大 区 域 ， 可 以 把 他 们 统称 为 内 容 信 息 。 它 们 存在 于 列表 的 范围 之 内 并 且 聚 集 组 成 一 个 形 
体 ， 也 就 是 看 到 的 算 形 虚线 框 内 的 范围 ，b 代表 元 素 距离 列表 边框 的 距离 ，a 则 是 主 标题 和 
副标题 之 间 的 距离 ， 在 设计 时 应 注意 把 这 两 个 距离 按照 元 素 关 系 控制 为 asb， 视 觉 元 素 的 摆 
放 位 置 关 系 才 会 变 得 合理 ， 否 则 就 会 变 成 图 2-61 这 样 的 情况 ， 肯 定 是 不 对 的 。( 如 图 2-65) 
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3. 在 民 好 的 规范 性 和 合理 的 视觉 元 素 群 集 关 系 基础 上 进行 视 党 元素 的 扩展 


藻 列 表 元 素 规划 能 够 达到 以 上 要 求 的 话 ， 就 可 以 进行 从 低 保 真 图 到 高 保 真 图 的 转化 
(如 图 2-62)。 首 先 ， 进 行 高 保 真 设计 的 时 候 ， 可 以 根据 已 经 规范 完成 后 的 低 保 真 网 进行 延 
展 ， 孢 像 是 建筑 设计 一 样 ， 最 初 都 要 把 建筑 蓝 网 进行 规划 后 才 可 进行 后 期 的 施工 〈 如 图 2-63 )。 
这 样 的 道理 就 如 同 界 面 设计 一 样 ， 把 每 一 个 元 系 的 位 置 按照 规范 性 和 元 系 群 集 关 系 规划 好 
之 后 ， 就 可 以 按照 这 样 的 元 素 位 置 加 入 文字 、 图 片 、 图 标 〈 如 图 2-64)。 


| A I RN 


: RN 区 > 
br 全， = i j 
PN 
T » i 天 
| W - 吉星 
天 ! 只 
LC Fh | 本 
| er | 1 
[| 
Bb 和 = 
Fm | l 


2-63 


移动 界面 设计 


一 一 视 党 营造 的 风 同 标 


00 视觉 设计 的 趋势 与 未 来 规划 女 页 
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图 2-64 是 作者 团队 开发 的 iOS 系统 应 用 《视力 派 》 中 的 一 个 列表 截图 ， 在 进行 低 保 真 
图 和 高 保 真 设 转化 后 ， 在 原 有 已 调整 好 的 布局 基础 之 上 ， 加 入 了 细节 ， 文 字 、 图 片 以 及 少量 
功能 延展 〈 如 高 保 真 图 中 的 星 级 展示 )， 界 面 的 视觉 效果 有 了 明显 提升 。 

那么 ， 对 于 列表 陈 布 局 来 说 ， 手 机 屏幕 一 般 是 竖 屏 显示 列表 ， 是 横 屏 显示 文字 ， 因 为 
紧 排 列表 可 以 包含 更 多 的 信息 。 列 表 的 数量 没有 太 多 限制 ， 通 过 上 下 滑动 可 以 查看 更 多 
内 容 。 

坚 排列 表 在 视觉 上 整齐 美观 ， 用 户 接 受 度 很 高 ， 常 用 于 并 列 元 素 的 展示 包括 目录 、 分 
类 、 内 容 等 (如 图 2-65 )。 


SS Chris Brown 


- 


SHIFU.JIM 630m 


~» A888806 ® 帘 窗 窑 商 


《9 吉 A88886 她 商 音 疯 斋 


SHIFU.JIM 630m 以 © 


2-05 


2.6.3 ”列表 却 布 局 的 优 缺 点 


列表 式 布局 的 优点 可 以 忌 结 为 以 下 几 扣 : 

@ 信息 层次 展示 清晰 。 内 容 : 可 展示 内 容 较 长 的 标题 ， 可 展示 标题 的 次 级 内 容 ， 可 以 
快速 划分 标题 信息 和 内 容 。 分 组 : 列表 项 目 可 以 通过 间距 、 标 题 等 进行 分 组 ， 让 信 
恩 层 级 更 加 清晰 ， 那 么 在 iOS 系统 中 主要 通过 列表 集群 间距 来 区 分 列表 的 分 组 (如 
图 2-66)。 

@ 较 早 出 现 同时 也 是 最 容易 接受 的 信息 展示 方式 之 一 ， 很 好 地 降低 用 户 的 学 习 成 本 ; 

@ 也 可 延展 更 多 的 辅助 布局 方式 进行 信息 规划 ， 比 如 下 拉 隐 藏 信 息 的 方式 。 


Ea 


列表 式 布局 的 缺 扣 也 可 以 


名 疆 


AN 一 器 
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为 以 下 几 操 : 


@ 和 容 另 出 现 视 觉 疫 区 : 同 级 内 容 过 多 时 会 增加 页 面 的 咒 度 ， 用 尸 浏览 容 易 产 生 疲 荔 ， 


并 且 造 成 视觉 界面 不 丰 军 


@ 不 灵活 : 排版 灵活 性 不 是 很 高 ， 只 能 通过 界面 的 顺序 ， 颜 色 来 区 分 各 入 口 重要 程 


所 以 针对 以 上 列表 云 布 局 的 不 足 ， 通 各 可 以 结合 以 下 方法 来 优化 列表 陈 布 局 : 


1) 结合 标签 、 


一 口 口 
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选项 卡 来 划分 列表 ， 在 图 2-67 中 的 个 人 中 心 页 面 中 “我 的 账户 ”一 栏 中 ， 
把 列表 展示 区 域 的 标题 内 容 用 标签 选项 卡 划 分 ， 


把 原本 很 多 列表 内 容 分 列 放 到 “余额 ">“ 优 惠 


其 ”“ 积 分 ”三 个 分 类 中 ， 在 让 信息 划分 得 更 加 明晰 的 同时 ， 也 减少 了 页 面 的 长 度 以 及 用 户 的 
视觉 疫 开 ， 提 升 了 用 户 碍 找 信息 的 速度 ， 从 而 优化 了 列表 式 布局 〈 如 网 2-67)。 
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2) 为 列表 式 布局 加 入 搜索 框 ， 列 表 内 容 过 多 会 造成 用 户 在 浏览 和 查找 信息 时 耽误 很 长 
时 间 ， 所 以 ， 在 使 用 标签 选项 卡 划分 列表 的 同时 ， 也 可 以 加 入 搜索 框 ， 用 来 提高 用 户 操作 效 
率 。 比 如 社交 移动 应 用 中 的 联系 人 列表 , (如 图 2-67) 都 会 加 入 搜索 框 来 提升 列表 式 布 局 的 
使 用 紊 ， 这 是 一 种 非常 常见 和 有 效 的 方法 。 


在 上 一 节 介 绍 列表 式 布局 时 提 到 了 关于 列表 式 布局 的 优 缺 操 ， 其 中 讲 到 关于 列表 式 布 局 
所 囊 来 的 信息 量 己 大 ， 查 找 麻 烦 的 缺陷 时 ， 设 计 师 可 以 通过 标签 式 布局 来 进行 相应 的 优化 和 
常理。 那么 ， 什 么 是 标签 式 布 局 呢 ? 

标签 式 布局 ， 义 称 选项 卡 tap， 是 一 种 从 网 页 设计 到 手机 移动 界面 设计 痢 会 大 量 用 到 的 
布局 方式 之 一 ， 束 像 前 面 所 提 到 的 品格 式 布局 这 一 类 的 布局 方式 ， 痢 是 从 网 页 设计 的 范畴 中 
沿用 至 手机 移动 界面 的 主流 布局 方式 。 那 么 对 于 标签 式 布局 来 说 ， 其 布局 方式 最 大 的 优点 便 
征 对 于 界面 空间 的 重复 利用 率 是 极 遍 的 ， 所 以 当 设 计 师 在 处 理 大 量 同等 级 别 信息 模块 的 时 
修 ， 可 以 使 用 选项 卡 ， 也 就 是 所 提 到 的 标签 式 布局 来 进行 处 理 是 非 第 有 效 的 。 尤 其 古 在 寸土 
寸 金 的 手机 界面 当中 ， 标 签 式 布局 可 以 说 是 真正 为 手机 界面 而 打造 的 界面 布局 方式 之 一 ， 其 
易 用 性 是 不 言 而 喻 的 。 而 且 在 市 省 界面 空间 的 同时 也 可 以 针对 于 大 量 的 信息 进行 处 理 ， 更 像 
是 储 物 盒 子 一 样 将 信息 分 类 放置 ， 有 条 不 紊 的 规划 和 梳理 产品 的 信息 “如 图 2-68)。 


Student Warks .有 
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图 2-68 中 展示 的 是 在 今年 年 初时 团队 所 设计 的 企业 官网 的 局 部 视觉 效 果 ， 可 以 看 到 在 
“学 生 作品 ”板块 中 ， 把 同一 区 域 同时 划分 成 了 了 “用户 界面 “网 页 设计 ”“ 平 面 设计 ”等 等 
以 下 几 个 版 块 ， 在 减少 页 面 高 度 的 同时 ， 对 于 当前 的 屏 尹 也 进行 了 5 次 重复 的 利用 ， 其 高 效 
率 的 效果 可 谓 不 言 而 只 。 从 用 户 体验 的 角度 来 讲 ， 一 味 地 增加 页 面 的 浏览 长 度 其 实 并 不 是 一 
个 非 第 明 乔 的 做 法 ， 因 为 当 用 户 浏 览 页 面 的 时 候 用 户 的 耐心 是 有 一 个 限度 的 ， 当 用 户 从 上 到 
下 浏览 页 面 时 ， 其 心理 也 会 从 和 仔细 浏览 逐渐 变 成 走马 观 花 式 的 快速 查看 ， 反 而 会 得 不 偿 失 ， 
在 手机 移动 界面 中 ， 由 于 手机 使 用 场景 的 雁 片 化 较 网 站 来 讲 更 加 严重 ， 所 以 用 户 的 这 种 心理 
也 会 更 加 明显 ， 一 般 手 机 页 面 的 长 度 不 会 超过 4 一 5 屏 ， 所 以 利用 标签 式 布局 可 以 很 好 的 解 
决 这 样 的 问题 ， 在 信息 传递 和 页 面 高 度 之 间 的 平衡 提供 了 一 个 有 效 的 解决 方案 。 
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图 2-69 是 我 们 团队 正在 开发 的 一 款 关 于 创意 生活 的 手机 APP 视觉 设计 图 的 局 部 效果 ， 

主要 是 针对 于 iOS 9.0 以 上 的 平台 ， 按 照 750X1334px 的 设计 环境 进行 设计 。 其 导航 栏 的 布 
局 中 也 加 入 了 标签 式 布局 的 效果 。 


生硬 合理 口 《arrier 三 


二 100%% 而 本 
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如 图 2-69 所 示 的 便 是 选项 卡 的 使 用 效果 ， 可 以 将 站 页 分 为 “品牌 ”和 “设计 生活 ”两 大 
板块 进行 依次 展示 ， 在 合理 划分 信息 板块 的 同时 ， 也 能 够 快速 地 传递 出 现 有 产品 的 主题 信息 。 

类 似 这 样 的 例子 在 手机 APP 中 并 不 少见 ， 比 如 QQ 的 “ 消 妃 ” 乒 员 及 图 2-70 所 示 
的 运动 类 APP 中 的 “交流 ”与 “ 友 现 ”选项 卡 剖 是 体现 这 样 的 设计 意图 。 
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在 现 有 的 三 大 手机 平台 ， 也 就 是 1i0S、Android 和 Windows Phone 的 原生 界面 中 都 会 加 
入 每 个 平台 特有 的 选项 卡 效 果 供 用 户 使 用 。 


2.7.1 i0 系统 中 的 标 釜 式 布局 


选项 卡 在 iOS 系统 中 的 使 用 主要 是 以 “分 段 选择 控件 ”为 主 ， 除 了 分 段 选 择 控 件 ，iOS 
系统 特有 的 的 部 tab 栏 也 是 标签 式 布局 的 男 一 个 草 要 体现 (如 图 2-71)。 


2-71 
对 于 分 段 选择 郁 ， 主 要 是 以 4 原 角 惩 形 为 主 的 选项 卡 效 末 ， 一 般 文 持 2 或 3 类 选择 ， 有 
时 也 会 有 更 多 。 它 属于 iOS 原生 设计 语言 中 的 设计 元 素 ， 主 要 是 为 当前 页 面 和 分 关 进 行 信 息 
划分 ， 很 多 存在 于 iOS 系统 的 第 三 方 应 用 也 会 使 用 到 这 个 控件 来 进行 展示 。 例 如 QQ 中 的 


“消息 ”分 类 (如 图 2-72) 


© SS 
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对 于 1OS 而 言 ， 只 有 当前 系统 会 把 手机 APP 的 导航 做 为 tab 选项 卡 放 置 在 界面 的 底部 ， 
对 于 原生 Android 系统 以 及 Windows Phone 系统 来 讲 这 都 是 明确 禁止 的 。 主 要 原因 还 是 由 于 
iOS 系统 的 导航 栏 并 不 会 像 Android 的 操作 栏 那 么 复杂 ， 其 次 ，iOS 界面 的 底部 也 不 会 出 现 
类 似 与 Android 的 三 个 物理 按键 ， 再 次 还 要 考虑 到 手指 点 击 的 舒适 性 ， 所 以 系统 允许 在 界面 


底部 出 现 导 航 栏 《如 图 2-73 )。 
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决定 设计 的 先决 条件 件 

例如 运行 在 iOS 10 系统 中 “健康 ”应 用 的 的 部 标签 柱 的 视 沉 效果 (tab) 一 般 分 为 4 一 $ 

类 选项 展示 ， 并 且 每 个 层级 之 间 的 关系 都 是 平行 的 ， 当 进入 到 二 级 页 面 时 ， 底 部 标签 栏 会 消 
失 ， 以 当前 页 面 的 重要 操作 来 代替 〈 如 图 2-74)。 
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这 是 一 球 基 于 12306 平 全 的 订 票 闫 APP,“TRAIN ”首页 中 可 以 分 为 “和 车票 预定 ”“ 行 程 
助手 ”“ 个 人 中 心 ”“ 旅行 服务 ”这 四 类 功能 ， 当 进入 二 级 页 面 时 ， 其 撒 部 的 所 展示 的 内 容 也 
就 变 成 当前 具体 车 次 信息 展示 页 面 所 需要 的 “准点 分 析 ”“ 行 程 图 ”这 两 个 功能 按钮 。 


2.1.2” 安 早 系 统 中 的 标 侈 式 布局 


对 于 安 早 系统 来 讲 ， 由 于 其 代码 开源 ， 所 以 全 球 的 安里 系统 非常 碎片 化 。 在 安 卓 系统 
中 ， 开 发 文档 中 明确 规定 选项 卡 tab 不 能 出 现在 界面 底部 ， 所 以 其 选项 卡 大 多 会 在 页 面 项 部 
和 操作 栏 下 方 出 现 〈 如 图 2-75 )。 
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移动 界面 设计 


一 一 视觉 营造 的 风向 标 

在 安 章 界面 中 的 布局 ， 通 音 通 过 “国定 选项 卡 ” 的 控件 来 展示 ， 其 用 途 也 主要 是 对 信息 
进行 分 类 和 梳理 ， 如 条 需要 ， 固 定 选项 卡 可 以 承载 选项 卡 tabs 用 于 展示 产品 导航 ， 其 中 也 可 
以 通过 图 标 ， 文 字 等 视觉 元 素 进 行 展 示 〈 如 图 2-76)。 图 2-76 中 展示 的 就 是 固定 选项 卡 的 示 
是 以 及 运动 在 实际 守 例 中 的 视觉 效果 ， 有 具体 关于 安里 系统 界面 的 设计 语言 会 在 后 面 Material 
Design 章节 中 重点 介绍 。 


YOU TbE HowE 


2 10 


2.7.3 Wind0wWs Phone 系统 中 的 标签 式 布局 


虽然 Windows Phone 系统 在 国内 的 市 场 占 有 率 并 不 高 ， 但 是 也 有 必要 介绍 一 下 标签 式 布 
局 在 Windows Phone 系统 中 是 如 何 存 在 与 使 用 的 。 在 Windows Phone 系统 中 ， 系 统 界 面 主要 
通过 “ 枢 轴 ”(Pivot) 来 承载 分 类 以 及 选项 卡 的 效果 ， 也 就 是 在 图 2-77 中 看 到 的 文字 


类 。 


> 
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枢 轴 控件 提供 了 一 种 快捷 的 方式 来 官 理应 用 中 的 视图 或 者 信息 层级 ， 并 可 以 用 来 过 洲 数 
据 ， 将 视图 以 及 文本 信息 的 分 类 。 枢 轴 的 控件 水 平 放 置 独 立 的 视图 ， 并 且 可 以 处 理 左 侧 和 左 
侧 的 叶 航 ， 通 过 划 动 或 者 大 平移 手势 来 切换 枢 轴 控件 中 的 视图 。Pivot 默认 文 持 手势 操作 ， 
比如 大 平移 式 的 操作 手法 ， 这 节省 了 用 户 的 操作 成 本 。 

枢 轴 可 以 通过 划 动 和 大 平移 手势 切换 页 面 ， 同 左 划 动 ， 由 当前 页 面 切 换 到 下 一 个 页 面 ， 
如 果 切 换 到 最 后 一 个 页 面 ， 青 进行 同样 操作 会 回 到 第 一 个 页 面 ， 也 就 是 说 ， 枢 轴 视 图 的 页 面 
征 可 以 循环 切换 的 。 

枢 轴 的 作用 可 以 概括 为 以 下 几 操 : 

a) 代 蔡 tab 控件 来 试用 ; 

b) 优化 局 动 所 需 时 间 ; 


[7 


决定 设计 的 先决 条 件 
C ) 过 滤 和 划分 视图 和 信息 O 


2.7.4， 标 们 陈 布 局 的 优 缺 点 


以 上 是 标 釜 式 布局 在 不 同系 统 中 的 使 用 情况 ， 下 面 融 标签 式 布 局 的 优势 和 缺陷 进行 分 
析 。 标 签 式 布局 的 优点 有 两 点 : 

a) 减少 了 界面 跳 转 的 层级 ， 重 复 利 用 同一 其 屏幕 ， 有 效 地 布 省 了 界面 的 高 度 。 

b) 展示 信息 量 大 ， 并 且 可 以 很 好 的 划分 和 平衡 页 面 信息 展示 的 层级 和 信息 传递 的 
效 朱 。 

而 缺点 在 于 ， 标 签 式 布局 与 侧 消 式 布局 一 样 ， 在 减少 页 面 长 度 ， 节 省 页 面 空间 的 同时 也 
增加 了 隐藏 信息 ， 需 要 手指 点击 选中 当前 的 选项 卡 才能 进行 浏览 。( 如 图 2-78) 
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在 规划 界面 的 布局 方式 和 视觉 设计 时 ， 设 计 师 基于 标签 式 布局 进行 控件 选择 时 ， 除 了 使 
用 系统 默认 的 控件 之 外 ， 例 如 : 分 段 选择 器 ， 还 可 以 进行 自主 的 设计 来 创作 出 更 多 的 视觉 交 
果 (如 图 2-79 )。 


Frorm 了 Ls] 癌 沉 
,9 总 [月 过 加 盘点 世界 最 美的 夜景 ， 你 都 见 过 几 个 ? 


面 而 击 尚 
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上 面 总 结 了 一 些 作者 团队 在 设计 页 面 过 程 中 所 用 到 的 一 些 选项 卡 的 设计 方案 ， 有 利用 弥 


散 投影 进行 设计 的 效 末 ， 也 有 利用 卡片 折纸 的 效果 ， 当 然 设 计 师 也 可 以 基于 当前 布局 框架 以 
及 功能 的 基础 上 发 挥 想 象 ， 为 手机 移动 界面 设计 出 更 多 样 化 的 视 党 方案 。 
71 | 
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一 一 视 党 营造 的 风 同 标 


这 一 市 主要 介绍 在 手机 移动 设备 的 界面 设计 中 第 用 的 几 种 布局 方式 。 其 实 对 于 布局 方式 


来 说 ， 其 存在 的 根本 原因 是 为 了 和 当前 页 面 所 展示 的 信息 相互 匹配 ， 便 于 页 面 信息 的 传递 与 信 
恩 层 级 的 划分 。 同 时 ， 也 是 为 了 后 期 视 沉 设计 打下 一 个 坚实 的 基础 ， 因 为 视觉 设计 师 也 需要 根 
据 低 你 真 图 所 展示 的 布局 框 染 进 行 视 沉 延展。 所以， 界面 的 框架 和 布局 方式 束 如 同 骨 染 一 样 ， 
文 撑 起 了 整个 产品 的 信息 展现 和 区 域 划分 ， 也 是 联接 交互 设计 与 视觉 设计 重要 的 桥梁 。 

对 于 布局 方式 ， 前 面 介绍 了 大 平移 式 、 号 格式、 列表 式 以 及 侧 消 式 等 布局 方式 。 不 难 发 现 ， 
其 实 每 一 种 布局 方式 部 是 为 了 去 展示 和 [匹配 不 同 的 信息 。 例 如 ， 当 交互 设计 师 需 要 在 当前 页 面 展 
示 检 索 信 息 的 话 ， 可 以 使 用 列表 云 布局 以 及 下 格式 布局 ， 如 果 当 前 页 面 展示 的 信息 太 多 以 全 于 大 
量 的 增加 了 页 面 的 显示 高 度 时 ， 设 计 师 可 以 使 用 标签 式 布 局 或 者 选项 卡 来 分 流 大 量 信息 以 便 减 少 
页 面 延展 ， 增 加 当前 页 面 利用 京 ， 以 及 减少 产品 的 页 面 跳 转 ， 市 省 用 户 的 操作 时 间 。 

那么 ， 布 局 方式 就 像 分 阳 储 物 盒 一 样 ， 把 需要 在 夫 面 中 展示 的 信息 进行 合理 的 分 布 。 对 
于 视觉 设计 来 次， 界面 的 布局 方式 的 选择 是 做 出 好 的 视 沉 效 末 的 重要 开始 ， 所 以 在 使 用 布局 
效果 的 时 候 应 该 改 根 据 信息 的 展现 而 细 分 、 优 化 和 丰 主 界面 的 布局 。 

在 布局 方式 的 选择 背后 ， 是 设计 师 是 舍 能 够 更 加 细 分 产品 信息 传递 的 专业 能 力 和 深度 ， 
以 及 对 于 信息 传递 给 用 户 的 敏锐 度 。 例 如 ， 同 样 是 产品 检索 页 面 ， 可 以 全 部 使 用 列表 式 布局 
进行 产品 展示 ， 但 会 让 用 户 产 生 视 觉 疫 务 和 焦 碟 感 ， 也 会 降低 当前 页 面 的 信息 传递 层级 性 ， 
如 果 在 当前 产品 中 想 要 突出 一 些 热门 或 者 焊 秋 产品 ， 其 效果 也 不 会 好 。 

所 以 可 以 使 用 一 些 宫 格式 布局 来 展示 一 些 重 点 推荐 产品 ， 这 样 ， 用 户 束 会 在 浏览 当前 页 
面 时 将 注意 为 目 和 党 放 到 宫 格 式 布 局 上 面 ， 增 加 了 页 面 的 信息 层级 和 视觉 的 跳跃 率 ， 通 过 视觉 
来 引导 用 户 的 视觉 浏览 顺序 ， 也 可 结合 眼 动 仪 进行 测试 。( 如 图 2-80) 
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决定 设计 的 先决 条 件 
设计 师 也 可 以 利用 移动 互联 的 一 大 特点 ， 也 就 是 “个 性 化 推荐 ”对 产品 列表 进行 进一步 
的 优化 。 因 为 在 产品 使 用 的 过 程 中 便 可 以 发 现 ， 用 户 的 内 心 其实 是 希望 得 到 足够 的 尊重 和 被 
关注 。 所 以 ， 这 种 个 性 化 的 信息 推荐 束 成 了 现 有 移动 终端 产品 发 展 的 必然 趋势 。 其 最 大 的 特 
点 就 是 先进 行 用 户 需 求 的 调研 ， 然 后 根据 用 户 调研 的 结果 或 者 是 用 户 之 前 的 搜索 以 及 交易 记 
录 进 行 相 关 产 品 的 推荐 并 展开 ， 从 而 产生 信息 推送 因 人 而 异 的 效果 ， 很 多 的 产品 都 在 运用 这 
种 方式 来 进行 展开 ， 例 如 前 文 对 “Apple Music” 中 进行 用 户 个 性 化 需求 的 调研 方式 的 分 析 。 
这 时 ， 设 计 师 往往 会 使 用 “大 平移 式 布 局 ”进行 推送 信息 的 展现 。 例 如 ， 刚 才 提 到 的 产品 列 
表 页 面 ， 也 可 以 根据 用 户 的 需求 ， 浏 览 记 录 以 及 购买 记录 加 入 这 一 版 块 ， 来 推送 和 用 户 购买 需求 
高 度 匹 配 的 定量 推送 的 产品 卡片 〈10 一 20 张 )， 以 便于 增加 产品 的 日 活 量 以 及 转化 率 。 
所 以 ， 大 平移 式 的 布局 方式 更 加 细 化 了 为 用 户 推 送 的 产品 层级 。 忌 结 一 下 可 以 看 到 ， 较 
为 粗放 的 “全 部 产品 ”使 用 列表 式 布 局 ， 热 门 产品 使 用 宫 格 式 布局 ， 而 匹配 度 最 高 的 “推荐 
产品 ”使 用 的 是 大 平移 式 布 局 ， 信 息 的 层级 和 推送 会 更 加 的 清晰 《〈 如 图 2-81)。 
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合理 使 用 布局 方式 的 目的 之 一 是 为 了 更 好 地 划分 产品 中 的 信息 层级 ， 通 过 布局 方式 将 信 
奶 推 送 清晰 化 ， 为 用 户 史 选 最 优 信息 来 让 用 户 做 选择 ， 从 而 减少 用 户 浏 览 信 息 的 时 间 成 本 。 
让 产品 使 用 更 加 高 效 ， 在 增加 用 户 的 转化 率 的 同时 也 从 侧面 证 明了 决定 布局 方 却 的 依据 是 产 
品 信息 的 传递 和 组 成 。 

通过 之 前 内 容 对 各 个 布局 方式 的 逐一 讲解 可 以 友 现 ， 每 种 布局 方式 部 有 着 非 党 大 的 优 
势 ， 但 也 存在 不 可 避免 面 的 缺陷 。 例 如 列表 式 布 局 的 优点 更 过 于 展示 信息 量 大 ， 学 习 成 本 较 
低 。 但 是 ， 其 缺点 也 是 由 于 信息 量 过 大 而 导致 用 户 在 碍 找 有 效 信 息 时 会 耗 训 过 多 的 时 间 成 
本 ， 所 以 ， 才 需要 结合 其 他 的 布局 方式 来 解决 和 弱化 缺点 。 
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一 一 视觉 营造 的 风向 标 

在 现 有 的 布局 方式 中 ， 通 种 都 需要 交互 设计 师 来 进行 穿插 配合 使 用 ， 以 便于 通过 各 种 不 
同 的 布局 方式 来 进行 缺点 的 互补 ， 因 为 如 果 使 用 单一 的 布局 方式 一 定 会 将 其 缺陷 不 断 放大 。 
并 且 使 用 多 种 布局 方式 进行 配合 也 可 以 更 加 优化 产品 的 信息 传递 ， 实 现 所 谓 “ 强 上 加 强 ” 的 
效果 ， 在 信息 推送 和 信息 层级 划分 上 达到 最 佳 的 用 户 体 验 。 

在 设计 和 规划 产品 布局 的 时 候 ， 设 计 师 会 发 现 还 存在 着 一 种 更 好 的 布局 方式 ， 那 就 是 利 
用 几 种 常见 的 布局 方式 综合 使 用 ， 相 互 配 ， 取 长 补 短 也 就 是 这 里 要 给 各 位 提 到 的 最 终 的 一 
种 布局 方式 一 一 混合 式 布局 。 

所 以 ， 看 似 简单 的 布局 方式 ， 其 实 是 要 展现 出 很 好 的 信息 规划 与 信息 推送 的 逻辑 思维 以 
及 产品 思维 。 而 且 ， 合 理 丰 富 的 布局 方式 也 是 进行 视 沉 设计 的 重要 基础 ， 对 于 未 来 产品 的 视 
觉 效 果 也 起 着 至 关 重 要 的 作用 。 
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一 一 视觉 营造 的 风向 标 


3.1 表面 中 的 文字 排版 


界面 设计 的 字体 选择 与 排版 规则 :无论 是 做 网 页 还 是 APP 设计 ， 文 字 内 容 总 能 占 到 整 
个 版 面 将 近 80% 的 区 域 。 因 此 理解 字体 与 排版 对 UI 设计 师 来 说 非 第 关键 。 字 体 作为 界面 设 
计 中 的 一 个 重要 元 系 ， 对 用 户 的 阅读 体验 起 着 至 天 重要 的 作用 ， 如 何 正确 的 选择 字体 并 合理 
的 设计 是 每 一 个 设计 师 都 应 该 熟练 掌握 的 技能 。 随 着 社会 的 发 展 ， 界 面 设计 的 需求 在 不 断 提 
高 ， 界 面 中 文字 的 应 用 也 融 变 得 随处 可 见 ， 正 在 从 原来 的 形式 设计 逐渐 癌 功 能 设计 过 渡 ， 这 

意味 看 这 一 设计 领域 的 成 熟 期 来 临 了 。 


3.1.1 文字 的 起 产 和 字体 的 性 格 


1. 衬 线 字体 和 无 讨 线 字体 

文字 作为 古老 的 信息 传播 形式 ， 对 人 类 的 友 展 起 着 巳 大 作用 。 纵 观 世 界 各 国 的 文字 ， 无 
论 是 英文 字母 还 是 汉字 ， 痢 是 源 于 图 形 。 和 信 们 为 了 记录 目 己 的 思想 、 活 动 、 成 束 ， 最 彻 使 用 
图 男 作 为 手段 ， 但 是 图 男 对 于 思想 的 表达 能 力 非常 有 限 ， 特 别 是 对 于 比较 抽象 的 思维 记录 ， 
几乎 无 能 为 力 ， 因 此 文字 油 然 而 生 ， 也 融 是 次 图 形 孕 育 了 文字 。 

大 家 都 知道 最 早 的 汉字 是 甲骨 文 ， 有 具有 会 意 、 指 示 等 特质 。 这 种 特质 和 平面 设计 一 样 ， 
是 供 人 “识别 ”的 ， 是 一 种 只 需 “ 看 ”过 之 后 ， 便 可 传播 信息 的 平面 图 形 ， 实 现 了 记录 、 打 
情 、 审 类 等 文化 功能 。 图 像 化 的 文字 具有 传递 信息 快 的 特点 ， 通 过 颜色 、 形 状 、 色 彩 、 质 感 
等 方式 ， 将 要 表达 的 信息 传达 给 他 人 ， 让 人 人 识别、 记忆 并 产生 影响 。 在 日 常生 活 中 我 们 随处 
者 可 以 接触 到 各 种 各 样 的 字体 ， 一 些 常 用 办 公 软 件 或 者 设计 软件 的 读者 还 会 了 解 一 些 字 库 ， 
比如 说 方正 字库 、 汉 仪 字库 、 华 文字 库 、 造 字 工 房 等 等 。 为 什么 一 样 的 文字 要 有 不 同 的 字体 
呢 ? 因为 同样 的 文字 会 因为 不 同 的 字体 而 形成 不 同 的 性 格 与 气质 。 

首先 需要 了 解 一 下 字体 的 分 类 。 总 得 来 说 ， 可 以 将 字体 分 为 两 类 :“ 衬 线 字 体 ” 和 “无 
衬 线 字 体 ”， 他 们 的 区 别 在 于 “ 衬 线 字 体 ” 在 笔 男 的 扔 角 处 有 装饰 ， 而 “无 桂 线 字 体 ” 没 有 
CS) 
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3 
讨 线 字体 的 特点 古 在 字 的 笔画 开始 与 结束 的 地 方 有 额外 的 六 饰 ,一般 笔画 的 粗细 会 


有 所 不 同 。 在 传统 的 印刷 中 ， 普 裔 认为 衬 线 字体 能 融 来 更 优 的 可 读 性 ( 相 比 无 衬 线 字 
体 )， 尤 其 是 在 大 段落 的 正文 中 ， 笠 线 字 体 增加 了 阅读 时 对 文字 的 视 沉 参照 (图 3-2)。 


76 


视觉 设计 中 的 字体 与 色彩 

唐 彰 张 怀 作 有 《文字 论 »》”“ 论 日 : 文字 者 ， 总 而 唐 朝 张 怀 作 有 《文字 论 》 论 日 : 文字 者 ， 总 而 为 
为 育 。 者 分 而 为 义 ， 则 文 者 祖父 ， 字 者 子孙 。 察 言 。 若 分 而 为 义 ， 则 文 者 祖父 ， 字 者 子孙 。 察 其 
其 物 形 ， 得 其 文理 ， 故 谓 之 日 文 ; 母子 相生 ， 蓝 物 形 ， 得 其 文理 ， 故 谓 之 日 文 ; 母子 相生 ， 莹 乳 
乳 韶 多 ， 因 名 之 为 字 。 题 於 竹 币 ， 则 目 之 日 书 。 寝 多 ， 因 名 之 为 字 。 题 於 竹 护 ， 则 目 之 日 书 。 字 
字 之 与 书 理 亦 归 一 因 文 也 者 ， 其 道 焕 泪 。 日 月 星 之 与 书 理 亦 归 一 因 文 也 者 ， 其 道 焕 址 。 日 月 星 
展 ， 天 之 文 也 ; 五 岳 四 污 ， 地 之 文 也 ; 城 阀 输 辰 ， 天 之 文 也 ; 五 岳 四 渎 ， 地 之 文 也 ; 城 阐 翰 
仪 ， 人 之 文 也 。 文 为 用 ， 相 须 而 成 ，..….” 仪 ， 人 之 文 也 。 文 为 用 ， 相 须 而 成 ，.…… 
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无 衬 线 字体 与 村 线 字 体 相 反 ， 没 有 额外 的 装饰 ， 而 且 笔画 粗细 也 兰 不 多 。 这 类 字体 通 名 
是 机 械 的 和 统一 线条 的 ， 它 们 往往 拥有 相同 的 曲率 ， 笔 直 的 线条 ， 锐 利 的 转角 。 人 往往 被 用 在 
标题 、 较 短 的 文字 段落 或 者 一 些 通俗 读物 中 。 相 比 严肃 正经 的 衬 线 字 体 ， 无 衬 线 字 体 给 人 一 
种 休闲 轻松 的 感觉 。 随 看 现代 生活 和 流行 趋势 的 变化 ， 如 今 的 人 们 越 来 越 喜 欢 用 无 桂 线 字 
体 ， 因 为 他 们 看 上 去 “更 干净 ”， 比 如 Helvetica 和 微软 雅 黑体 〈 图 3-3 )。 


AaBbCe 冯 平 


2. 中 英文 的 发 展 历史 

象形 文字 是 出 现 最 早 的 文字 形式 ， 可 以 记录 菏 些 简单 的 事物 ， 但 随 痢 语言 环境 的 发 展 ， 
沟通 变 得 越 来 越 多 ， 越 来 越 复 洒 ， 无 法 用 图 形 表 达 。 百 埃及 人 与 办 美 尔 人 开始 通过 一 些 代 表 
音 的 符号 来 记录 语言 ， 而 吝 代 中 国人 却 选择 了 万 外 一 种 方法 : 

@ 会 意 字 ， 如 “日 十 月 = 明 ， 女 十 子 = 好 ”; 

@ 表 首 守 ， 如 “ 阿 ” 没有 任何 意义 ， 只 表示 一 个 首 市 ; 

@ 通 假 字 ， 如 “说 一 避 ” 开始 出 现 于 汉字 中 。 

汉字 从 最 早 的 甲骨 文 、 金 文 、 小 得 、 隶 书 、 楷 书 、 行 书 一 直到 印刷 字体 “如 宋体 字 )、 
电脑 字体 (如 黑体 字 、 海 报 体 、 综 艺 体 等 美术 字体 ) 经 历 了 几 千 年 的 不 断 变 化 。 

碳 文 文字 大 致 分 成 三 类 ， 衬 线 字 体 、 无 衬 线 字体 和 其 他 字体 。 其 他 字体 包括 哥 特 体 、 手 
写 体 和 北 饰 体 ， 这 些 字 体 在 工作 中 使 用 相对 较 少 ， 一 般 来 说 计 线 字体 和 无 计 线 字体 两 大 类 是 
使 用 最 广泛 的 。 

衬 线 字体 的 历史 比较 悠久 ， 是 古 罗 马 时 期 的 碑刻 用 字 ， 适 合用 于 表达 传统 、 和 典雅、 高 贯 
和 距离 感 。 衬 线 字体 可 以 分 成 两 类 : 关 似 手写 的 衬 线 字 体 叫 “ 旧 体 ”， 笔 兴 会 留 下 固定 倾 冬 
角度 的 书写 痕迹 ，O 字母 较 细 的 部 分 连 线 是 和 斜 线 。 旧 体 并 不 意味 过 时 ， 传 统 书 籍 正文 通 第 用 
旧 体 排版 ， 更 适合 长 文 阅 读 。 比 例 工整 ， 没 有 手写 痕迹 的 衬 线 字 体 叫 “现代 体 ” 其 O 字母 
较 细 部 分 连 线 是 垂直 的 。 体 现 了 明快 的 现代 感 ， 给 人 冷峻 、 严 格 的 印象 ， 这 种 衬 线 字 体 缩小 
后 文字 易 读 性 比较 送 ， 一 般 在 标题 上 使 用 〈 图 3-4)。 
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3. 常用 中 文字 体 

衬 线 字 体 和 无 衬 线 字 体 这 两 种 不 同 的 表现 形式 不 仅 使 文字 外 观看 起 来 不 同 ， 而 且 在 设计 
应 用 中 传达 的 气质 也 人 不同， 下面 以 中 文字 体 为 例 进行 介绍 。 

a) 宋体 字 最 大 的 特点 就 是 笔 田 有 粗细 的 变化 ， 一 般 是 模 细 竖 粗 ， 并 且 在 笔画 的 抛 角 处 
有 洲 饰 (图 3-5)， 红 色色 块 是 宋体 字 的 明显 特征 ， 这 也 是 视 党 风格 最 关键 之 处 。 宋 体 字 是 衬 
线 字 体 的 基础 字 型 ， 所 以 它 的 雄 饰 性 要 比 黑体 字 强 很 多 ， 所 传达 出 的 气质 目 然 也 惑 更 多 ， 宋 
体 字 型 秀气 ， 刚 劲 有 力 ， 变 化 得 当 ， 方 正和 平稳， 对称 均衡 ， 问 庄 典 雅 ， 依 展 大 气 ， 深 党 大 家 
的 喜爱 。 适 合 在 文化 、 艺 术 、 生 活 、 女 性、 美食、 养生 、 化 妆 品 等 领域 应 用 。 


= 作 


一 一 - 人 


下 了 
A Wp 
= 人 


宋体 字 因 为 有 边 角 辣 饰 ， 所 以 适用 于 较 有 文化 气 奶 的 设计 。 只 要 是 与 文化 气质 有 关 的 项 
目 ， 宋 体 字 都 会 是 首选。 

b) 黑体 字 是 一 种 涉 饰 字体 ， 而 不 是 书法 人 字体。 黑体 字 在 结构 上 吸收 了 宋体 字 结 构 严 说 
的 优点 ， 把 宋体 字 的 尖 头 细 尾 和 头 尾 粗细 不 一 的 笔画 变 为 方形 笔 团 ， 因 此 独 具 一 格 ， 给 人 一 
种 坚实 有 力 、 严 肃 庄 重 、 朴 素 大 方 的 感觉。 

黑体 字 是 很 常见 的 一 种 字体 ， 因 为 黑体 字 笔 国 基 本 上 有 是 横 平 紧 百 的 ， 而 且 在 点 、 撒 、 
捧 、 挑 、 勾 上 都 是 方 头 的 ， 所 以 也 叫 方 体 。 黑 体 字 属于 无 衬 线 字 体 ， 无 论 是 中 文 还 是 英文 都 
传达 出 简 涪 干练 的 气质 。 黑 体 字 的 特点 表现 在 笔画 粗壮 ， 帝 有 纤细 笔触 ， 笔 男 紧 浴 ,不 用 弧 
线 。 黑 体 字 是 打印 经 党 使 用 的 字体 之 一 ， 一 般 用 于 印刷 、 书 面 报告 等 比较 正式 的 场合 ， 多 用 
于 标题 或 标识 重点 。 

黑体 字 是 一 种 万 能 而 且 风 格 不 太 明 显 的 字体 ， 说 它 万 能 也 正 是 因为 黑体 字 型 的 简洁 和 规 
定 所 带 来 的 百 搭 感 ， 它 的 可 塑性 很 吕 ， 通 过 字体 的 放大 或 者 变形 ， 束 可 以 表现 出 不 同 的 气质 
来 。 另 外 ， 黑 体 字 可 以 通过 变形 加 透视 的 调整 ， 将 其 用 于 标题 使 用 。 

粗 黑体 字 适 用 于 标题 和 大 型 文字 的 表现 ， 而 细 黑 体 字 适用 于 排 印 正文 或 者 说 明文 ， 由 于 
黑体 字 没 有 特别 强烈 的 个 性 ， 所 以 它 适用 的 范围 也 比较 广 ， 可 塑性 很 强 ， 可 以 表现 两 业 气质 
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(图 3-6)， 也 可 以 表现 激情 ， 还 可 以 表现 出 动感 ， 甚 至 变 成 纤细 的 黑体 字 来 表现 女性 风格 。 


DC 


站 


用 咖 嘲 香 唤 醒 味 鞭 


品尝 一 杯 浓烈 山 啡 香 和 值得 怀念 的 味道 


了 


黑体 字 型 商业 气质 浓厚 ， 也 可 以 通过 3D 效果 来 作为 商业 地 产 项 目的 标题 。 黑 体 字 型 与 
宋体 字 和 书法 体 相 比 ， 韵 味 上 稍 有 人 不足， 但 是 如 果 整 体 的 男 面 风格 比较 有 韵味 ， 那 么 黑体 字 
也 可 以 作为 正文 出 现在 版 而 里 ， 既 不 抢 戏 ， 还 可 以 保留 一 部 分 的 两 业 气质 。 

c) 圆 体 字 由 黑体 字 演 变 而 来 ， 与 黑体 字 相 比 ， 它 保留 了 黑体 字 的 严肃 与 方正 ， 却 又 将 
笔画 的 抛 角 和 末尾 处 理 成 了 圆 缴 状 ， 看 起 来 加 乎 乎 的 ， 显 得 稚 趣 、 可 爱 、 小 资 、 丙 业 味 ， 增 
加 了 一 丝 杀 近 感 与 活泼 感 。 圆 体 字 更 加 明确 地 表达 出 柔美 和 爽 滑 感 ， 它 同样 适合 应 用 于 女 
性 、 美 食 、 养 生 与 化 妆 品 等 领域 ， 与 宋体 字 型 不 同 的 是 ， 宋 体 字 型 更 倾 问 于 表现 精致 且 刘 有 
内 涵 的 气质 ， 这 两 种 字体 给 人 的 心理 感受 是 不 同 的 〈 图 3-7)。 


Chil buh, jiLIR 
THE MOUNTANSG WIRGTESTAN SONDE 
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d) 中 国 书 法 除了 汉字 本 号 独特 的 象形 性 、 图 画 性 特点 外 ， 采 用 独特 的 书写 工具 毛笔 ， 
也 是 形成 中 国 书 法 风格 的 重要 的 原因 。 和 毛笔 柔软 而 在 有 弹性 ， 可 任意 弯曲 扭 动 ， 张 多 有 上 度 ， 
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能 注 酒 自如 地 表现 出 各 种 粗细 、 大 小 、 曲 直 、 刚 柔 的 线条 变化 ， 更 能 把 书写 者 的 情感 赋予 其 
中 ， 这 就 形成 了 中 国 书法 的 特征 。 书 者 写 的 技艺 达到 一 种 高 上 度 时 ， 毛 笔 在 手 ， 字 已 非 字 ， 笔 
男 线 条 随心 所 欲 ， 干 变 万 化 ， 以 至 达到 所 写 之 字 似 有 生命 的 境界 (图 3-8)。 


onoTenmuUS 
THU 


e) 儿童 体 ， 其 实在 字体 的 历史 上 ， 并 没有 所 谓 的 儿童 体 ， 儿 童 体 是 近 现 代 人 们 根据 两 
业 需 求 设 计 出 来 的 ， 他 们 最 大 的 特征 惑 是 笔画 更 加 圆润 、 活 泼 ， 没 有 其 他 字体 那 种 严 谋 感 ， 
随意 性 比较 强 ， 特 别 符合 儿童 天 真 活泼 的 性 格 。 儿 童 字体 常用 在 与 儿童 有 关 的 行业 宣传 中 或 
者 儿童 节 等 特殊 节日 的 宣传 (图 3-9 )。 


本 
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3.1.2 ”文字 的 重 构 


字体 设计 包括 内 容 设 计 与 形式 设计 两 个 方面 ， 通 过 合理 的 创意 将 文字 重 造 ， 表 达 不 同 的 
内 容 ， 同 时 让 用 户 能 够 准确 、 快 速 、 有 效 地 获取 信息 。 商 业 设 计 中 字体 设计 尤为 重要 ， 使 用 
频率 也 非常 高 。 

1. 字体 性 格 

人 们 经 第 用 “ 字 如 其 人 ”形容 一 个 人 的 写字 风格 ， 由 此 可 以 看 出 字体 也 存在 看 不同 的 性 
格 色 彩 。 为 了 更 准确 地 进行 字体 设计 ， 首 先 要 了 解 一 下 字体 的 “性 格 ”， 这 是 字体 设计 最 基 
本 的 概念 。 

文字 基本 上 和 是 由 结构 、 笔 画 和 细节 三 个 特征 要 系 构 成 的 ， 络 构 的 距 密 、 笔 画 的 粗细 、 线 
条 的 曲直 、 细 节 特 征 的 修饰 都 会 影响 到 一 个 字体 的 视觉 特 征 ， 也 会 塑造 出 不 同 的 字体 性 格 。 
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2. 字形 结构 
对 文字 的 性 格 影响 最 为 直接 的 是 结构 的 变化 ， 局 平 与 瘦 高 的 结构 会 给 人 不 同 的 感受 〈 图 
3-10)。 汉 字 经 音 称 为 “方块 字 ” 是 由 其 结构 特征 所 得 ， 通 单 情 况 下 比较 纤 瘦 、 高 挑 的 字形 
更 具 文 艺 气 县 ， 偏 女性 化 一 些 ， 而 局 平 的 字形 重心 偏 低 ， 更 沉稳 、 庄 重 一 些 。 进 行 字体 设计 
时 ， 通 常会 参考 汉字 本 身 方正 的 结构 进行 设计 ， 但 也 可 以 尝试 把 字体 结构 调整 为 各 届 ， 会 给 
人 一 种 稳定 、 紧 凑 、 庄 重 的 感觉 〈 如 图 3-11)。 图 3-12 中 “山泉 鱼 ” 字 体 设计 虽然 瘦 高 但 不 
算 专 张 ， 笔画 轻 双 能 够 体现 出 细腻 、 优 雅 的 女性 色彩 ， 有 高 冷 文艺 范 的 气质 。 


全 化 地 产 
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图 3-12 
松散 或 紧凑 的 字体 结构 ee id 字形 结构 不 仅 指 笔 男 粗细 ， 笔 男 之 间 


的 留 日 也 一 样 重要 。 留 昌 越 多 ， 给 人 感 澳 越 轻 松 、 透 气 ， 节 委 越 舒缓 ， 相 反 ， 内 部 空间 紧凑 
束 会 营造 出 紧张 、 有 力 的 氛围 (如 图 3- 13)。 
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3. 性 格 分 析 
我 们 将 整理 出 的 需求 关键 词 与 字体 的 性 格 相 对 应 ， 并 进行 匹配 。 和 字体 完 竟 是 女性 化 


81 


移动 弄 面 设计 


一 一 视觉 营造 的 风 癌 标 
还 是 男性 化 ， 是 现代 还 是 复古 ， 这 些 通过 需求 关键 词 便 可 以 轻松 对 应 到 字体 的 性 格 中 
(如 图 3-14 )。 


第 一 步 第 一步 , 
需求 分 析 性 格 分 析 设计 方 同 
餐饮 优雅 纤细 
高 端 | 中 国 风 粗壮 
科技 现代 马 平 
文艺 轻快 松散 
古典 列 硬 紧 读 
品质 曲线 

松弛 
3=]4 


4. 字体 设计 

知道 了 我 们 需要 怎样 性 格 的 字体 ， 再 进行 字体 设计 就 很 简单 了 。 只 需 将 所 需 性 格 细 分 到 
字形 结构 、 笔 画 特 征 、 细 节 三 项 中 ， 束 好 像 客 户 直 接 给 你 说 我 需要 高 高 瘦 瘦 的 字形 、 笔 画 细 
而 曲 、 空 间 相 对 宽松 等 ， 这 样 束 会 有 了 很 明确 设计 方 同 。 

那么 ， 在 设计 方案 的 时 候 ， 用 到 的 一 些 字 体 和 常常 会 是 非 商 用 的 ， 也 就 意味 着 在 没有 购买 
的 前 提 下 使 用 了 一 些 字库 中 的 文字 时 ， 会 侵犯 版 权 ， 那 该 怎么 办 呢 ? 可 以 通过 设计 字体 来 避 
免 这 类 问题 。 字 体 设计 有 几 种 基本 的 方法 ， 分 别 是 : 矩形 造 字 、 钢 笔 造 字 、 书 法 造 字 等 ， 并 
使 用 Adobe Tllustrator 矢量 制图 软件 来 进行 制图 。 下 面 重 点 介绍 矩形 造 字 、 钢 笔 造 字 这 两 种 
字体 设计 方式 。 

a) 和 矩形 造 字 就 是 在 矩形 框 内 进行 文字 再 设计 ， 听 上 去 就 知道 是 比较 规矩 的 一 种 造 字 方 
式 ， 这 类 型 的 文字 一 般 会 以 黑体 字 为 基础 ， 因 为 黑体 字 型 比较 严谨 、 规 符 。 当 然 字 体 的 气质 
与 风格 是 一 定 要 与 主题 相符 合 的 ， 如 果 想 要 表达 的 气质 是 力量 感 较 强 的 ， 商 业 化 的 ， 严 说 大 
气 的 ， 那 么 就 可 以 选择 这 种 造 字 方式 。 

矩形 造 字 所 采取 的 是 堆积 木 的 方式 ， 用 “ 丽 景 假日 ”举例 说 明 : 

第 一 步 ， 可 以 用 “微软 雅 黑 字体 ”将 这 四 个 字 打 出 来 ， 作 为 基础 参考 。 然 后 画 4 个 方 
框 ， 作 为 文字 大 小 参照 ， 并 将 其 锁定 (图 3-15)。 


丽 景 假日 


LDL 
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第 二 步 ， 设 计 笔 画 的 粗细 。 这 里 要 特别 强调 一 点 ， 和 矩形 造 字 中 的 笔画 分 为 横竖 同 宽 和 横 
细 竖 粗 两 大 类 ， 这 里 先 介 绍 横竖 同 宽 的 该 如 何 设计 〈 如 网 3-16)。 
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丽 景 假日 一 一 | | 
DID 


图 3-16 
第 三 步 ， 以 堆积 木 的 方式 将 文字 笔 国 一 一 摆 出 《如 图 3-17)。 


NN 于 个 日 


图 3-17 


第 四 步 ， 再 进行 整体 结构 的 调整 。 在 调整 的 过 程 中 ， 不 仅 需 调整 整体 的 比例 结构 ， 
本 
在 笔画 的 起 始 处 添加 一 些 尖 和 角 、 圆 角 等 (如 图 3-19 )。 


0 吾 上 fa] 


图 3-18 
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b) 横 细 紧 粗 这 种 字体 设计 方法 与 “横竖 同 宽 ”字体 的 设计 方法 是 一 样 的 ， 只 是 在 最 初 
制定 笔画 粗细 的 时 候 有 所 不 同 〈 如 图 3-20)， 在 将 字体 的 结构 以 及 细节 调整 之 后 ， 还 可 以 通 
过 字体 颜色 或 者 添加 描 边 等 处 理 手法 将 其 变 得 更 加 丰富 (如 图 3-21 )。 


入 川 史 [ 诗 


图 3-20 
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c) 钢笔 造 字 是 指 利 用 Adobe Tllustrator 中 的 钢笔 来 进行 字体 设计 。 钢 笔 造 字 整体 感觉 柔 
基础 做 法 是 规 规 息 矩 造 字 ， 比 较 严 说， 设计 步骤 如 下 : 

第 一 步 ， 根 据 项 目的 行业 属性 来 进行 字体 气质 的 准确 定位 ， 据 此 选择 用 哪 种 造 字 方式 来 
字体 设计 。 

第 二 步 ， 输 入 项 目 名 称 ， 选 择 合适 的 基础 字体 作为 结构 参照 。 

第 三 步 ， 一 笔 一 画 将 文字 写 完 ， 在 这 里 需要 注意 一 点 ， 撒 和 探 这 两 笔画 可 以 用 圆 角 矩形 
角 来 代替， 横 平 竖 直 ， 这 样 比较 严谨 。 

第 四 步 ， 进 行 细节 的 刻画 与 调整 ， 例 如 字体 的 间架 结构 ， 笔 国 分 布 ， 字 间距 、 色 彩 搭 配 
图 3-22 )。 
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除了 这 种 严 课 的 造 字 方式 之 外 ， 还 可 以 将 目 己 设计 的 活 冯 一 点 ， 让 字体 有 一 种 活泼 的 感 
党 ， 也 会 比较 有 创意 《图 3-23 )。 


前 各 证 桨 机 | 7 
向 州 | 妾 庄 i 


图 3-23 
d) 曲线 造 字 是 利用 钢笔 工具 进行 字体 笔画 的 曲线 设计 ， 通 过 曲线 形成 柔美 的 字体 造 
型 ， 多 应 用 于 美容 、 食 品 等 行业 (图 3-24 )。 
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图 3-24 


e) 创意 造 字 是 在 字体 字形 设计 基础 上 使 图 形 更 具 创 意 ， 通 常 利 用 字体 内 容 进行 创意 图 
形 的 表现 ， 使 文字 不 仅 具 有 可 读 性 ， 而 且 拥 有 图 形 识 列 性 ， 可 以 更 加 直接 的 表达 字义 。 通 种 
使 用 的 方法 有 : 笔画 着 代 、 利 用 文字 的 正 负 空 间 等 《图 3-25 )。 


(天 一 
一 一 
dS 


f) 个 性 手绘 的 设计 方式 是 通过 手绘 的 方法 来 实现 的 ， 通 第 这 种 设计 表现 出 来 的 字体 设 
计 感 较 强 ， 义学 的 变化 写 对 比 强 到 ， 由 不 同 的 手绘 风格 与 字形 结构 来 表达 不 同 的 视 沉 特征 ， 
是 字体 设计 中 最 姑 活 的 一 种 方法 ， 通 津 使 用 纸 笔 或 手绘 板 实现 (如 图 3-26 )。 
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图 3-26 


最 后 总 结 一 下 ， 在 字体 设计 最 开始 的 时 候 ， 首 先 需 要 去 了 解 客户 的 需求 ， 然 后 根据 字体 
设计 时 需 wh 字体 再 创造 时 需要 哪些 基本 原则 呢 ? 首先 ， 从 文字 表达 
的 含义 出 发 ， 应 有 相对 明确 的 目的 性 和 功能 性 。 比 如 为 一 款 外 卖 APP 设计 字体 ， 就 应 将 行业 
的 特点 加 入 到 设计 中 去 ， 这 样 的 设计 会 更 加 的 生活 化 ， 第 二 ， 协 调 一 致 ， 适 度 灵活 ， 保 持 匀称 
的 设计 节奏 。 字 体 设计 往往 是 为 了 辅助 主题 的 表达 ， 那 么 在 字体 风格 确定 的 时 候 束 必须 考虑 项 

目 背 景 的 风格 ， 不 能 仅 考虑 文字 的 效果 ; 第 三 设计 的 文字 一 定 要 有 很 强 的 辨识 度 ， 尤 其 在 设计 
汉字 时 ， 因 为 中 国文 化 博大 精深 ， 汉 字 笔 男 较 多 ， 要 适当 根据 文字 的 意思 或 者 造型 进行 笔画 的 
添加 和 删 减 ， 但 是 无 论 如 何 变 化 ， 都 必须 保证 它 的 辨识 度 没 有 问题 。 视 觉 设计 不 仅仅 只 求 美 
观 ， 如 果 只 为 了 进 求 美观 而 设计 ， 那 么 一 定 会 忽略 挥 很 多 关键 性 问题 ， 设 计 是 要 服务 大 众 的 ， 
那么 在 设计 时 不 仅 要 从 设计 师 的 角度 出 发 ， ee 及 客户 的 客户 的 角度 〈 也 束 
是 产品 的 使 用 者 们 ) 来 考虑 ， 作 品 才 会 更 加 完 
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1. 文字 排版 设计 原则 

a) 大 小 反差 。 由 于 PC 疹 与 手机 端的 界面 尺寸 差异 较 大 ， 所 以 进行 文字 排版 时 应 采用 不 
同 的 字体 大 小 组 合 方式 进行 设计 ， 以 解决 阅读 体验 的 问题 。 不 仪 是 屏幕 尺寸 带 来 这 种 影响 ， 
用 户 在 使 用 PC 端 与 手机 端 时 的 观看 距离 也 不 同 〈 如 图 3-27)。 使 用 PC 端 时 ， 眼 睛 离 屏 幕 远 
一 些 ， 使 用 手机 端 时 ， 眼 睛 离 屏 幕 近 一 些 。PC 端的 屏幕 较 大 ， 需 要 字号 差异 较 大 的 文字 组 
合 ， 手 机 端 屏幕 小 ， 单 斌 展示 的 文字 较 少 ， 使 用 与 PC 问 相 同 的 字号 差异 感受 会 过 于 强烈 ， 
所 以 应 该 使 用 较 小 的 字号 反差 〈 如 图 3-28 )。 


PC 闹 


45-60cm 


20cm 


”21 
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b) 字 重 指 的 是 同一 款 字 体 不 同 程度 的 粗细 。 选 择 字 重 不 是 使 用 软件 中 的 文字 加 粗 工 具 
或 给 文字 描 边 ， 这 样 做 会 使 文字 本 身 笔 画 间 的 空 际 减少 ， 破 坏 原 本 字库 字体 设计 时 的 美感 ， 
而 且 会 改变 文字 的 宽度 和 高 度 ， 有 影响 文 本 的 对 齐 。 正 确 的 方法 是 使 用 字体 本 里 的 字库 默认 字 
重 来 控制 ， 如 于 方 字体 、 微 软 雅 黑 字 体 本 身 提 供 Light、Regular、Medium 等 两 三 种 甚至 更 多 
的 字 重 选择 (如 图 3-29 )。 

c) 字 间 距 指 的 是 一 组 文字 之 间 间 隔 的 距离 。 通 常 ， 不 同 字 体 打 出 来 时 会 有 不 同 的 字 间 
距 ， 这 是 字库 设计 时 根据 字体 特质 考虑 阅读 性 设 定 的 默认 字 间 距 ， 除 非特 丈 排版 方式 ， 人 否则 
正文 使 用 时 不 要 轻易 改变 字体 默认 的 字 间 距 。 


人 
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-7 ENGLISH ENGLISH ENGLISH ENGLISH ENGLISH 
NON NC NaN 


°° ENGLISH ENGLISH ENGLISH ENGLISH 
95 Black 75 Bold 45 Light 35 Thin 
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2. 再 面 设 计 中 文字 的 排版 方式 

字体 的 排版 原则 : 对比、 重复 、 对 齐 、 亲 密 ， 这 是 文字 排版 的 根本 ， 设 计 师 通过 这 些 方 
式 合理 的 归 类 所 浏览 界面 中 的 文字 内 容 ， 保 证 了 版 面 文字 能 够 有 效 地 表达 希望 传达 的 意义 ， 
让 阅读 更 连贯。 

a) 对 比 。 营 造 对 比 的 方式 有 很 多 ， 我 们 主要 讲解 标题 与 正文 的 对 比 ， 具 体 方法 有 字体 
的 对 比 、 字 号 的 对 比 、 文 字 颜 色 的 对 比 、 文 字 颜 色 与 背景 颜色 的 对 比 。 

如 图 3-30， 左 图 标题 和 正文 均 为 12 号 宋体 字 ， 右 图 标题 使 用 18 号 的 微软 雅 黑 ， 正 文 
使 用 12 号 的 宋体 。 不 同 的 字体 、 字 号 和 字 重 的 对 比 拉 开 了 文字 的 层次 ， 提 高 了 大 段 文 字 的 
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阅读 性 。 文 字 颜 色 对 比 可 以 突出 文字 中 重点 的 部 分 ， 同 时 提升 视觉 效果 。 注 意 ， 不 可 以 使 用 
三 种 以 上 的 颜色 ， 多 种 颜色 反而 会 增加 疯 读 负担 ， 如 图 3-31。 文 字 颜 色 与 背景 颜色 对 比 是 排 
版 中 常常 会 迪 到 的 情况 ， 正 文 会 根据 版 式 要 求 补 放 在 不 同 闫 色 的 背景 上 ， 而 文本 与 背景 要 有 
合适 的 对 比 度 才 会 提高 文字 的 可 该 性 ， 给 用 户 优 越 的 阅读 体验 ， 如 果 文 字 过 小 、 过 细 或 被 背 
景 磊 色 接 这， 都 会 影响 可 读 性 (如 图 3-32 )。 


标题 文字 与 正文 对 比 示范 标题 文字 与 正文 对 比 示范 


字体 的 排版 原则 : 对 比 、 重 复 、 对 齐 、 亲 密 的 字体 的 排版 原则 : 对 比 、 和 重复、 对齐 、 亲 密 的 
各 种 表现 形式 ， 是 文字 排版 的 根本 ， 是 保证 我 各 种 表现 形式 ， 是 文字 排版 的 根本 ， 是 保证 我 
们 版 面 文字 能 够 有 效 的 表达 字 里 的 意思 ， 也 能 们 版 面 文字 能 够 有 效 的 表达 字 里 的 意思 ， 也 能 
够 指引 用 户 合理 的 归 类 所 浏览 界面 中 的 文字 内 够 指引 用 户 合理 的 归 类 所 浏览 界面 中 的 文字 内 
容 ， 让 阅读 更 连 典 。 容 ， 让 阅读 更 连 供 。 
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文字 颜色 的 对 比 


字体 的 排版 原则 : 对 比 、 重 复 、 对 齐 、 杀 密 的 各 种 表现 形式 ， 是 文字 排版 的 根本 ， 是 
保证 我 们 版 面 文字 能 够 有 效 的 表达 字 里 的 意思 ,也 能 够 指引 用 户 合理 的 归 类 所 浏览 
面 中 的 文字 内 容 ， 让 阅读 更 连贯 。 


| 


文字 颜色 和 背景 色 


字体 的 排版 原则 : 对 比 、 重 复 , 
对 齐 、 亲 密 的 各 种 表现 形式 ,是 
立 字 | 员 本 , 是 保证 我 们 版 
面 欧 字 能 个 有 效 的 囊 达 于 里 的 意 
思 ， 也 能 够 指引 用 户 合理 的 归 类 
所 浏览 界面 中 的 文字 内 容 ,让 阅 
读 更 迹 贰 。 


OW (%) 


2 


b) 重复 。 设 计 元 素 可 以 在 整个 设计 作品 中 不 断 出 现 ， 文 字 的 字体 、 字 号 、 样 式 可 以 
重复 ， 图 形 元 素 也 可 以 重复 ， 文 字 与 图 片 等 排版 形式 也 可 以 重复 。 不 要 担心 重复 使 用 元 妈 
会 使 页 面 单调 ， 必 要 地 重复 使 用 一 些 元 素 或 布局 ， 反 而 会 使 作品 看 起 来 更 具有 统一 性 、 组 
织 性 、 一 致 性 ， 也 会 使 用 户 的 阅读 体验 更 连贯 ， 凸 旺 作品 的 专业 性 。 如 下 和 守 例 在 产品 展示 
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部 分 采用 了 统一 的 排版 形式。 虽然 内 容 不 同 ， 而 布局 一 样 ， 图 瞩 拍 摄 角 虚 一 样 ， 默 认 状 态 

下 文字 颜色 一 样 。 用 户 首次 浏览 时 ， 就 能 知道 它们 属于 同一 主题 下 的 内 容 ， 整 个 版 面 连贯 
而 平衡 (图 3-33 ) 。 


HGH USING ADVANCED BGH USING ADVANCED HIGH USING ADNANCED 
INPORTED INPORTED INPORTED 


3 


c) 对 齐 。 排 版 中 有 一 个 必须 要 注意 到 的 细节 就 是 对 齐 元 素 。 设 计时 要 注意 画面 中 的 元 
素 ， 包 括 图 形 、 图 像 和 文字 ， 它 们 彼此 都 要 有 一 定 的 对 齐 天 系 。 在 界面 设计 中 ， 元 素 在 画面 中 
的 位 置 都 与 其 他 元 素 有 着 某 种 联系 ， 不 同 的 对 齐 方式 会 带 来 不 同 的 视觉 效果 ， 把 握 好 元 素 对 
齐 关 系 可 以 营造 有 趣 、 轻 松 、 严 谨 、 个 性 等 个 同 的 氛围 。 文字 段落 中 的 对 齐 方式 分 为 左 对 
齐 、 居 中 对 齐 、 右 对 齐 、 两 端 对 齐 等 ， 通 常 只 选用 一 种 文本 对 齐 方 式 。 居 中 对 齐 比 较 正 式 、 
严谨 (图 3-34); 左 对 齐 或 右 对 齐 可 使 文字 边界 整齐 ， 文 本 看 起 来 更 清晰 易 读 〈 图 3-35 )。 


品 牌 介 绍 
\BOLUT 了 HI BRAND 。。。 

魔 甲 VR 一 体 战斗 机 魔 甲 VR 一 体 战 斗 机 魔 甲 VR 一 体 战斗 机 
计算 机 上 生成 的 、 可 交互 的 三 维 的 三 维 的 三 维 计算 机 上 生成 的 可 交互 的 三 维 的 三 纶 的 三 维 计算 机 上 生成 的 、 可 交互 的 三 维 的 三 维 的 三 维 
环境 中 提供 沉 漫 感觉 的 技术 环境 中 提供 沉 漫 感觉 和 的 技术 环境 中 提供 沉 漫 感觉 的 技术 

334 
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无 感 努 蕉 无 线 岂 标 900 无 感 妈 有 旺 无 线 风 标 
之 BO 人 - 
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d) 亲密 性 。 是 指 将 相关 元 系 的 距离 拉 近 ， 使 它们 看 起 整体 统一 。 使 用 的 方法 有 两 种 ， 
留 日 和 突出 视觉 重点 ， 目 的 都 是 为 了 增加 层次 ， 易 于 阅读 。 例 如 图 3-36 中 文字 排版 方式 ， 
通过 理解 文字 内 容 ， 给 他 们 拉 开 间距 ， 青 结合 前 边 讲 到 的 其 他 对 比方 式 ， 使 整 段 文字 层级 分 
明 ， 突 出 文采 重点 ， 易 于 阅读 而 且 视 沉 效 来 丰富 。 


A CAT / AFRAID 
YOU DON'T 


区 SY 
一 
0o9” 


399 VS ouse-231 


al el” il 
图 3-36 


3. 其 他 文字 排版 规则 

a) 行 长。 通常 情况 下 人 人们 日 常见 到 的 阅读 性 产品 无 论 是 在 移动 产品 或 PC 界面 中 还 是 在 
传统 媒体 上 ， 每 行 的 文字 ， 都 不 会 超过 40 个 汉字 。 文 字 排 版 时 设计 师 需 要 异 得 考虑 如 何 减 
轻 阅 读 负 担 ， 比 如 : 单行 文字 如 果 过 长 ， 读 者 也 许 会 轻微 转动 头 部 ， 不 仅 会 因 疲 区 降低 阅读 
效率 ， 同 时 容易 串 行 ， 影 响 用 户 情绪 ， 打 乱 阅 读 节 委 。 所 以 在 PC 端 进行 界面 设计 时 较 宽 的 
显示 天 不 适宜 一 段 文字 横路 整个 屏 噬 ， 而 应 该 使 用 分 栏 的 设计 手法 ， 划 分 阅读 区 域 。 

b) 行 间 距 。 指 的 是 文本 行 与 行 之 间 的 距离 。 界 面 设计 中 ， 需 要 很 好 地 把 控 行 间距 ， 控 
制 文 学 密度 。 行 间距 太 小 ， 文 学 笔 田 可 能 会 粘连 在 一 起 ， 同 时 容易 串 行 ， 行 间距 过 大 ， 会 浪 
费 版 面 空间 ， 行 与 行 之 间 的 留 晶 区域 会 降低 阅读 连贯 性 。 行 间距 的 数值 没有 固定 值 ， 通 常会 
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视觉 设计 中 的 字体 与 色彩 

根据 字号 的 大 小 进行 相应 变化 ， 界 面 设计 中 会 使 用 1.5 一 2 倍 字号 数值 的 行 间 距 。 例 如 字号 是 
10px， 行 距 束 应 是 15px 至 20px 之 间 。 

除了 行 间距 需要 考虑 ， 有 段 间 距 也 需要 考虑 。 段 间距 可 以 根据 实际 情况 而 定 ， 文 章 骗 幅 
短 ， 则 不 需要 段 间 距 ， 文 章 篇 幅 较 长 ， 需 要 比 行 间距 数值 更 大 的 段 间距 来 控制 内 容 的 节 委 。 

c) 文字 留 日 。 在 文字 排版 时 ， 版 面 需要 留 白 ， 留 白面 积 的 顺序 是 : 段 间 距 大 于 行 间 
距 、 行 间距 大 于 字 间 距 。 此 外 ， 文 字 内 容 区 域 ， 在 页 面 中 的 位 置 不 要 贴 在 页 面 边界 上 ， 通 第 
文字 四 周 会 留 出 比 段 间距 大 的 空 日 。 

4. 中 文 与 类 文 的 排版 区 别 

a) 段 沙 结 构 上 的 和 差异。 英文 的 文字 特征 是 每 一 个 单词 长 度 不 一 样 ， 所 以 排版 时 不 使 用 
两 奖 对 齐 的 对 齐 方式 ， 对 齐 左 端 后 ， 行 长 不 同 ， 行 末 会 产生 错落 感 ， 中 文 的 文字 特征 是 方块 
字 ， 排 版 时 可 使 用 两 端 对 齐 的 对 齐 方式 。 案 例 中 展示 了 中 瑞 文 段 沙 的 不 同 之 处 (图 3-37)， 
可 以 看 出 文字 红线 显示 了 上 段 洲 末 闹 的 不 同 ， 瑞 文具 有 起 伏 感 ， 而 中 文 段 沙 整 齐 ， 缺 少 视 鞠 上 
的 变化 感 。 


第 二 次 世界 大 战 期 间 ， 英国 的 许多 年 轻 妇女 都 在 军队 里 .。jJoan 
Phillips 是 他 们 中 的 一 个 。 她 在 一 个 大 营地 工作 ， 当 然 也 遇 到 了 很 
多 男人 ， 军 官 和 士兵 .。 一 天 晚上 ， 她 在 舞会 上 遇 到 了 汉 弗 莱 斯 
上 尉 。 他 对 她 说 : “我 明天 就 要 出 国 了 ， 但 是 如 果 我 们 能 给 对 方 


During World War ll, a lot of young women in Britain were in the 


army. Joan Phillips was one of them,. She worked in a big camp, 


and of course met a lot of men, officers and soldiers. 

One evening she met Captain Humphreys at a dance. He said 
写 信 ， 我 会 很 高 兴 的 。 。 

然后 他 的 信 停 了 ， 但 是 她 收 到 了 另 一 个 军官 的 信 ， 告诉 她 他 受伤 
了 ， 在 英国 的 一 家 军队 医院 里 。 琢 去 了 那里 ， 对 护士 长 说 ， 我 
来 看 望 汉 弗 莱 斯 队长 。” 


to her, "|'m going abroad tomorrow, but l'd be very happy if we 


could write to each other." Joan agreed, and they wrote for 


Several months. 


1 


b) 字体 结构 产 异 。 瑞 文 与 中 文笔 画 结 构 不 同 ， 中 文 有 模 、 竖 、 撤 、 探 ， 看 起 来 刚 便 ， 
中 文 有 些 字 字形 复 汪 ， 有 些 字 笔 男 较 少 ， 留 日 多 ， 所 以 行 高 不 能 统一 ， 喘 文 弧 线 较 多 ， 看 起 
来 动感 十 足 ， 每 一 个 字体 占用 的 比例 空间 差不多 ， 看 起 来 整齐 。 

c) 排版 规则 的 兰 民 。 中 文中 标点 符 吕 会 占据 一 个 字符 空间 ， 英 文中 标 氮 符 号 后 据 半 个 
字符 空间 ， 这 是 根据 文字 结构 不 同 而 设计 的 ， 如 和 中文 排版 全 部 换 成 英文 标点 ， 中 文本 身 紧 
凑 的 字形 会 使 文本 段落 看 起 来 更 加 拥挤 〈 疼 3-38)。 

中 文 标点 秽 文 标点 


字体 ， 字体 字体 字体 ， 字 体 ， 字体 ， 字体， 字体 字体 字体 ,字体 字体 字体 ,字体 ,字体 ,字体 ,字体 字体 字体 , 字 
字体 ， 字 体 ， 字 体 ， 字体， 字体 字体 字体 ， 字体, 字 体 ,字体 ,字体 ,字体 字体 字体 ,字体 ,字体 ,字体 ,字体 字体 
体 ， 字体 ， 字体 字体 字体 ， 字体， 字体 ， 字体， 字体 字体 ,字体 ,字体 ,字体 ,字体 字体 字体 ,字体 ,字体 .…… 

字体 字体 ， 字 体 ， 字 体 … 


3-38 
有 时 候 人 们 会 觉得 ， 英 文字 体 无 论 古 做 字体 设计 还 是 排版 ， 部 显得 比 中 文字 体 更 局 级 一 
些 ， 其 主要 原因 是 很 多 人 把 英文 作为 图 形 化 符 扎 来 解读 。 一 般 情 况 下 ， 图 形 的 美观 度 要 大 于 
字符 的 美观 度 。 所 以 国内 一 些 品牌 在 进行 标志 设计 时 和 铝 会 使 用 英文 ， 让 用 户 和 觉得 更 局 级 。 
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移动 界面 设计 


一 一 视 沉 营造 的 风向 标 


3.2 ”人 靠 请 的 配色 技巧 


3.2.1 制作 目 己 的 调 色 盘 


配色 一 直 都 是 设计 中 非常 重要 的 组 成 部 分 ， 而 且 也 成 为 刚刚 进入 设计 行业 的 设计 师 所 面 
上 临 的 挑战 之 一 。 拥 有 一 套 好 的 配色 方案 是 很 多 设计 师 所 同 往 的 。 所 以 ， 本 市 我 们 将 着 重 给 大 
家 介绍 一 下 移动 界面 设计 中 的 一 些 配色 方案 以 及 作者 在 工作 中 总 绪 的 一 些 配色 方法 ， 和 希望 为 
在 配色 方面 有 困扰 的 设计 从 业者 提供 帮助 。 

对 于 配色 ， 其 本 吴 是 有 规律 可 循 的 。 通 第 同一 个 界面 中 明确 众 用 一 个 颜色 ， 而 且 应 本 看 
“ 色 不 过 三 ”的 配色 原则 进行 设计 。 

设计 师 在 进行 配色 时 ， 需 要 各 种 不 种 类 型 的 色 系 进行 相互 配合 ， 按 照 最 常见 的 配色 比 
例 ， 无 色彩 系 通常 占据 70% 的 配色 比重 ， 有 色彩 系 占据 30%， 如 果 将 有 色彩 系 进 一 步 细 分 的 
话 ， 产 品 的 主 色调 占据 70% 并 且 与 辅 色调 相辅相成 ， 辅 色调 烘托 主 色 调 丰富 画面 ， 所 以 ， 主 
色调 的 辅 色调 只 占有 色彩 系 的 30%， 那 么 在 辅助 色 之 中 相 邻 色 或 者 同类 色 占 据 20%， 主 要 是 
为 了 保持 相 邻 色 饱 和 度 的 统一 性 ， 剩 下 的 就 是 对 比 色 ， 占 据 10%， 其 作为 点 睛 色 使 用 ， 一 般 
来 说 ， 对 比 色 存在 范围 较 小 ， 并 且 会 远离 主 色 调 而 存在 ， 并 且 依 靠 无 色彩 系 调节 画面 ， 保 持 
页 面 配色 的 平衡 感 还 可 以 丰富 画面 。 

下 面 我 们 就 给 大 家 逐一 介绍 关于 配色 的 组 成 以 及 其 要 点 ， 先 来 了 解 一 下 颜色 的 构成 。 总 
得 来 说 ， 颜 色 可 分 为 两 种 媒介 和 组 成 ， 一 种 是 “无 色彩 系 ” 而 男 外 一 种 是 “有 色彩 系 ”。 

1. 无 色彩 系 

对 于 无 色彩 系 ， 更 多 是 指 白 色 与 黑色 以 及 从 黑色 到 白色 从 明 到 上 暗 的 各 种 灰色 ， 无 色彩 系 
在 色彩 三 种 属性 (明度 ， 饱 和 上 度 ， 色 相 ) 中 只 包含 “明度 ”这 一 种 属性 ， 所 以 从 这 个 角度 来 
讲 ， 无 色彩 系 不 属于 颜色 的 范畴 (图 3-39、 图 3-40) 


3-39 
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视觉 设计 中 的 节 体 与 名 末 


3-40 


由 于 无 色彩 系 不 具备 “色相 ”以 及 “饱和 度 ” 所 以 ， 无 色彩 系 不 会 在 这 两 个 层面 和 其 
他 闫 色 发 生 冲 突 。 ety 无 色彩 系 是 永恒 的 安全 色 ， 我 们 可 以 发 现 ， 无 色彩 系 和 任何 一 
种 色彩 配合 在 一 起 都 会 显得 很 和 谐 。 所 以 ， 它 是 名 副 其 实 的 公共 色 ， 这 束 与 我 们 通常 使 用 日 
和 来 面 画 的 原因 是 一 样 的 ， 

那么 ， 当 进行 页 面 设 计 的 时 候 ， 设 计 师 通 第 会 选择 无 色彩 系 作 为 页 面 设 计 的 背景 色 使 
用 。 在 整个 页 面 中 ， 无 色彩 系 的 页 面 配色 从 占有 率 来 说 也 是 很 高 的 ， 接 近 整 个 配色 方案 的 
70% (如 图 3-41、 图 3-42 ) 


4:34 PM 
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我 们 可 以 及 现 ， 虽 然 界面 风格 和 产品 的 服务 人 群 不 同 ， 但 是 大 多 数 移动 界面 的 背景 色 都 
是 以 无 色彩 系 为 主 ， 由 于 其 只 具有 “明度 ”这 一 种 属性 ， 所 以 在 无 色彩 系 的 背景 中 ， 对 于 其 


于 具 风 县 


他 的 色相 和 色彩 的 包容 性 会 更 强 。 
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一 一 视觉 营造 的 风向标 

那么 ， 对 于 背景 色 来 说 ， 选 择 的 色彩 最 好 不 要 下 接 使 用 纯 黑色 或 者 纯 白色 ， 因 为 一 般 在 
设计 师 选 取 配 色 方 和 的 过 程 中 ， 痢 会 加 守 一 条 不 成 文 的 规定 ， 也 就 是 “ 唯 脏 色 与 纯色 不 可 
用 ”的 配色 原则 。 百 接 使 用 黑色 或 者 日 色 会 使 我 们 的 界面 非常 刺眼 ， 所 以 作者 在 选择 界面 痛 
景色 时 通 第 会 使 用 浅 灰 色 或 者 深 灰 色 。 

在 选择 浅 灰 色 时 ， 可 以 很 好 地 降低 纯 日 色 带 给 用 户 因 高 明太 产生 的 不 适 感 ， 此 外 ， 这 也 
是 为 了 给 后 期 进行 卡片 式 设 计 做 一 个 铺垫 ， 因 为 卡 厂 式 设 计 束 是 为 了 通过 背景 色 的 明暗 来 使 
页 面 信息 层级 更 加 明显 ， 使 信息 传递 更 具备 层级 感 ， 所 以 如 朱 痛 景色 就 使 用 纯 日 色 的 话 ， 那 
么 咒 无 法 给 卡片 更 腕 的 项 色 以 凸显 ， 效 果 也 不 是 很 好 ， 如 图 3-43 所 示 ， 所 以 设计 师 在 选取 
育 景 颜色 时 要 尽量 选择 接近 与 日 色 的 浅 灰 色 作 为 界面 的 背景 色 。 
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同时 也 要 注意 ， 在 选取 浅 灰 色 作 为 背景 色 时 ， 要 控制 Photoshop 中 拾 色 器 的 选择 (图 3-44 )。 

浅 色 背 景 的 选 色 区 间 最 好 是 控制 在 图 3-44 中 所 标注 的 区 间 之 中 。 如 果 选 色 的 区 间 太 靠 
下 的 话 ， 以 浅 灰 色 为 主 的 背景 色 就 开始 变 得 比较 脏 了 。 所 以 ， 要 慎重 选 色 ， 因 为 背景 色 所 占 
据 的 面积 还 是 很 大 的 。 

另外， 如 果 选 深 灰 色 的 话 ， 在 确定 明度 之 后 ， 可 以 让 深 灰 色 略 微 回 蓝 色 背 景 进行 靠拢 ， 
这 会 使 深 灰 色 的 背景 变 得 比较 高 级 ， 而 不 是 单纯 地 死 灰 色 《图 3-45)。 


| | 只 有 Web 颜色 


| | 口 有 Web 颜色 


3-44 3-45 
所 以 ， 在 确定 背景 色 时 ， 作 为 初 入 设计 行业 的 设计 师 ， 选 择 无 色彩 系 的 色彩 为 背景 色 会 
比较 保险 。 力 外 ， 在 选择 背景 色 时 ， 要 上 尺 可 能 地 避 开 脏 色 与 纯 黑 纯 白色 来 确定 界面 的 背景 
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| 
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会 比较 靠 谱 。 


2. 有 色彩 系 


除去 无 色彩 系 ， 剩 下 的 具备 明度 、 色 相 、 饱 和 度 这 三 种 属性 的 颜色 均 属 于 有 色彩 系 的 范 
畴 。 由 于 其 属性 中 包含 了 色相 与 饱和 度 ， 所 以 在 颜色 搭配 起 来 承 更 加 考 完 了 ， 这 也 是 配色 时 
需要 重点 解决 的 一 个 问题 ， 但 它 也 是 有 规律 可 遵循 的 。 

其 实 ， 颜 色 这 种 介质 源 于 大 上 自然 的 馈赠 ， 是 由 于 对 太阳 所 发 散 出 的 “上 自 光 ”进行 色散 之 
后 形成 的 “ 单 色 光 ” 人 的 肉眼 可 识别 出 七 种 不 同 的 单 色 光 ， 也 就 是 我 们 平时 所 熟悉 的 “ 彩 
虹 ” 的 效果 (图 3-46) 


图 3-46 


将 这 七 种 单 色 光 进 行 连接 束 成 了 设计 师 非常 熟悉 的 12 色 环 的 配色 工具 ， 众 多 的 配色 方 
案 也 束 缠 涵 其 中 (图 3-47 )。 
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提 到 配色 ， 葡 不 得 不 对 颜色 进行 一 些 基 本 介绍 。 闫 色 包 含 三 原色 ， 也 束 古 “ 红 ， 足 ， 
获 ” 这 三 种 不 可 通过 调和 而 产生 的 闫 色 ， 那 些 连接 原色 的 颜色 ， 我 们 将 其 称 作 “ 间 色 ”， 有 
些 时 候 会 出 现 更 遇 级 的 复 色 ， 也 就 是 指 由 三 种 或 三 种 以 上 调和 产生 的 闫 色 。 

设计 师 在 进行 界面 配色 的 时 候 ， 多 数 情 况 会 绕 开 原色 而 使 用 间 色 甚至 是 复 色 。 这 主要 是 
为 了 避免 使 用 较 纯 的 闫 色 而 造成 用 户 视 觉 感受 的 不 适 。 


3.2.2 ”明度 、 人 饱和 度 、 色 相 的 概念 及 使 用 


需 色 的 三 种 属性 是 颜色 最 重要 的 组 成 部 分 。 其 实 凑 色 的 三 种 属性 对 于 设计 师 来 说 并 不 是 
很 陌生 ， 分 别 是 明度 、 色 相 以 及 饱和 度 。 但 是 真正 理解 并 且 将 其 灵活 运用 束 会 有 些 难 度 了 。 
下 面 束 逐一 介绍 这 三 种 属性 。 

1. 明度 

明度 泛 指 闫 色 的 光源 明暗 程度 ， 是 依据 闫 色 的 明暗 变化 来 定位 的 ， 明 上 度 是 无 色彩 系 唯一 
具备 的 属性 ， 而 对 于 有 色彩 系 ， 不 同 的 色相 也 有 明度 之 分 ， 其 中 黄色 明度 最 高 ， 而 紫色 明度 
最 低 ， 绿 、 红 、 览 、 梅 的 明度 相对 比较 接近 。 

当 色 相 一 致 时 ， 也 有 具备 明度 上 的 区 别 ， 如 图 3-48 所 示 。 我 们 在 设计 页 面 时 ， 通 党 用 到 
软件 之 一 是 Photoshop 〈 人 简称 PS)， 那 么 我 们 就 以 PS 中 的 拾 色 器 为 例 ， 一 般 我 们 会 在 拾 色 器 
中 使 用 “色相 ”模式 来 配色 ， 那 么 在 这 个 拾 色 需 面板 中 ， 明 度 和 饱和 度 的 界限 变 得 非常 模 
精 ， 但 是 ， 我 们 可 以 看 到 ， 当 前 配色 面板 的 色彩 明度 基本 上 都 是 在 绷 着 左上 角 ， 也 束 阴 日 色 
的 方 同 有 发展， 越 来 越 完 《如 图 3-48 )。 


| | 只 有 Web 颜色 
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在 配色 时 ， 有 时 也 会 采用 这 种 色相 一 致 ， 明 度 兰 卉 的 配色 方案 。 因 为 颜色 的 色相 古 确 定 
的 ， 只 是 明暗 会 及 生变 化 ， 所 以 这 种 配色 方案 是 除 无 色彩 系 外 对 于 眼球 刺激 最 小 ， 也 征 较 稳定 
的 配色 方案 ， 可 以 近 距 离 使 用 。 例 如 ， 当 我 们 试图 为 界面 的 状态 栏 和 导航 栏 进行 配色 时 ， 残 可 
以 使 用 这 种 方案 ， 可 以 很 好 地 区 别 这 两 个 控件 的 区 域 ， 也 不 会 太 过 于 刺激 眼球 (如 图 3-49 )。 
当前 APP 的 状态 栏 和 导航 栏 使 用 的 闫 色 在 拾 色 瞩 中 的 取 色 区 域 为 (图 3-50、 图 3-51)。 
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六 | 只 有 Web 颜色 六 | 只 有 Web 颜色 


图 3-50 ”状态 栏 的 取 色 图 3-51 导航 栏 的 取 色 


我 们 可 以 发 现 ， 在 为 状态 栏 以 及 导航 栏 分 别 进行 配色 时 ， 色 相 几 乎 是 没有 发 生 任何 变化 
的 ， 只 是 调整 了 颜色 的 明暗 进行 区 别 。 但 是 ， 对 于 常规 的 手机 应 用 界面 来 说 ， 仅 利用 这 种 配 
色 方 案 是 很 难 做 出 很 好 的 视觉 效果 的 。 试 想 一 下 ， 如 果 一 个 界面 从 上 到 下 只 有 一 种 颜色 ， 仅 
仅 是 明度 发 生 一 些 变 化 的 话 ， 页 面 的 视觉 效果 通常 会 很 单调 ， 除 非 能 够 很 好 地 驾驭 文字 排版 
以 及 页 面 框架 布局 的 划分 ， 否 则 页 面 的 视觉 效果 一 定 会 出 现 很 大 的 问题 。 所 以 ， 我 们 需要 其 
他 的 配色 方案 共同 配合 来 设计 出 好 的 界面 配色 效果 。 

2. 饱和 度 

饱和 度 ， 又 称 为 颜色 的 “纯度 ” 一 般 指 的 是 色彩 的 鲜艳 与 浑浊 以 及 饱和 与 清新 的 色彩 
调和 程度 。 首 先 ， 同 一 种 色相 的 颜色 会 有 饱和 度 上 的 区 别 ， 例 如 图 3-52 所 示 。 同 一 种 绿 
色 ， 由 于 加 入 了 不 同 的 白色 ， 其 饱和 度 就 会 产生 很 大 的 区 别 。 就 像 是 在 使 用 水 粉 颜料 画 夯 一 
样 ， 若 想 将 一 种 颜色 的 饱和 度 降 低 ， 往 里 面 加 入 白色 无 疑 是 最 好 的 选择 。 


S02 


色彩 的 饱和 度 不 同 ， 对 于 人 们 眼球 刺 诉 的 程度 也 会 有 所 不 同 。 一 般 颜 色 的 饱和 上 度 越 低 ， 
对 于 眼球 的 刺激 会 越 低 。 所 以 ， 现 在 低 饱 和 上 度 的 颜色 和 风格 会 更 多 地 受到 人 们 的 豆 爱 ， 它 会 
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给 人 一 种 内 心 的 平静 。 例 如 日 式 小 清新 风格 设计 以 及 摄影 风格 经 和 常会 利用 低 饱 和 上 度 的 颜色 处 
理 方式 来 呈现 其 视 党 效果 《〈 图 3-53)。 
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我 们 在 进行 界面 设计 的 配色 选择 时 ,“ 不 要 使 用 脏 色 以 及 纯色 ”的 原则 其 实 就 是 对 磊 色 
饱和 上 度 的 选择 和 要 求 。 在 这 里 给 大 家 介绍 一 下 作者 总 结 的 配色 方案 ， 我 们 还 是 以 PS 中 的 拾 
色 禹 为 例 来 进行 分 析 〈 图 3-54)。 

在 闫 色 选 择 时 ， 我 们 通常 会 在 拾 色 器 中 将 其 从 左上 角 到 右 下 和 角 男 一 条 对 角 线 。 对 角 线 以 
下 的 颜色 通 第 比较 浑 池 ， 一 般 不 建议 使 用 ， 所 以 我 们 把 这 个 区 域 变 成 了 灰色 。 靠 近 最 右 侧 边 
绿 的 闫 色 是 整个 拾 色 器 中 饱和 拔 最 高 的 闫 色 ， 一 般 也 不 建议 使 用 ， 也 将 其 加 入 灰色 区 域 。 那 
么 ， 剩 下 的 非 灰 色 区 域 的 其 色 束 可 以 作为 我 们 设计 页 面 时 的 选 色 区 域 了 ， 通 钟 也 束 适 合 “ 叭 
脏 色 与 纯色 不 可 用 ”的 界面 配色 原则 了 。 

这 种 配色 方案 适用 于 各 种 不 同 的 平台 。 现 有 的 OS，Android 以 及 Windows Phone 系统 
都 对 各 自 的 配色 方案 有 着 自己 的 要 求 。 例 如 在 Material Design 所 要 求 的 设计 语言 之 下 ， 对 于 
配色 的 选择 瓯 明确 提出 ， 界 面 的 选 色 应 尽量 使 用 非 高 饱和 两 色 进 行使 用 和 调和 ， 如 图 3-55 
所 示 便 是 Material Design 中 局 平 化 控件 以 及 界面 配色 的 选 色 区 域 。 

这 也 从 侧面 验证 了 移动 界面 中 的 选 色 规则 。 上 所 以 ， 对 于 两 色 的 饱和 度 的 选择 和 把 控 ， 对 
于 界面 整个 配色 方 守 的 营造 起 看 巨大 的 作用 ， 为 什么 界面 的 配色 不 建议 使 用 高 明度 的 配色 方 
案 呢 ? 主要 原因 如 下 : 

a. 用 户 一 般 使 用 手机 的 距离 较 近 ， 凑 色 饱和 度 太 高 会 刺激 眼球 ， 用 户 在 查看 界面 时 容易 
出 现 疫 丈 感 。 

b. 手机 的 屏 秦 本 里 就 是 发 光 体 ， 在 这 样 的 环境 中 ， 蜗 饱和 上 度 的 闫 色 同 样 也 会 给 用 户 带 
来 严重 的 不 恨 体 验 。 
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3. 色相 

色相 一 般 是 指 色彩 的 相 铝 和 种 类 ， 同 时 是 色彩 最 大 的 特点 ， 也 融 是 次 ， 设 计 师 使 用 到 的 
色 环 就 是 根据 色相 的 切换 来 进行 区 别 和 连接 的 ， 也 融 是 用 于 区 别 不 同色 彩 的 名 称 。 人 们 在 辩 
别 色 彩 之 间 的 差 卉 的 依据 其 实 束 来 目 不 同 波长 的 光 给 人 们 造成 的 不 同 的 色彩 感受 。 

界面 设计 在 配色 过 程 中 离 不 开 色 相 的 配合 ， 因 为 仅 仪 利用 一 种 色相 进行 配色 毕竟 太 单 调 
了 ， 了 唯 有 利用 色相 之 间 的 配合 才能 达到 界面 配色 方案 中 的 “ 丰 定 ”*。 那 么 ， 对 于 闫 色 之 间 的 
选择 与 实用 则 是 设计 师 需 要 深入 考 完 的 问题 了 。 其 实 ， 对 于 色相 之 间 的 配合 与 使 用 ， 也 是 有 
规律 可 循 的 。 下 一 节 就 给 读者 介绍 两 种 经 各 使 用 的 配色 方案 。 


3.2.3 ”移动 问 视 客 弄 面 颜色 选 色 原则 


1. 相 邻 色 的 使 用 
相 邻 色 通 党 是 指 在 色 环 中 紧 换 在 一 起 的 颜色 ， 例 如 黄色 的 相 邻 色 便 是 桶 黄色 、 桶 红色 以 
及 暧 绿色 (图 3-56)。 
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这 种 配色 方法 在 页 面 配 色 中 经 常 使 用 ， 可 以 起 到 丰富 画面 配色 视觉 效果 的 作用 。 而 且 由 
于 其 色相 之 间 的 距离 并 不 是 很 远 ， 所 以 对 于 眼球 的 刺激 也 很 微弱 ， 整 体 的 配色 效果 比较 温和 
且 稳 定 ， 是 一 种 很 不 错 的 配色 方案 。 颜色 之 间 也 可 以 近 距 离 使 用 ， 使 用 合理 的 话 会 达到 一 种 
意 想 不 到 的 视觉 效果 ， 这 是 比较 容易 掌握 的 配色 方法 。 

图 3-57 中 的 APP 界面 便 是 利用 相 邻 色 设计 的 配色 方案 ， 这 种 方案 会 使 页 面 在 丰富 配色 
的 同时 ， 也 不 会 造成 太 大 视觉 上 的 刺激 。 所 以 ， 一 般 设 计 师 在 选择 相 邻 色 配 色 时 ， 通 币 会 以 
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一 种 色相 为 中 心 ， 同 着 其 两 端 各 延展 两 到 三 个 相 令 色相 配合 使 用 ， 效 果 较 好 。 在 使 用 相 邻 色 
的 时 候 ， 一 般 会 通过 色 块 拼接 或 者 相 邻 色 渐 变 的 两 种 方式 进行 视觉 表现 ， 例 如 下 面 我 们 看 到 


的 两 张 弄 面 ， ee ee 
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2. 对 比 色 的 使 用 

对 比 色 是 指 在 色相 环 中 以 180” 角 对 应 的 两 种 颜色 ， 称 为 “对 比 色 ”或 者 “互补 色 ” 由 于 这 
两 种 颜色 在 色 环 中 的 距离 较 远 ， 所 以 会 给 用 户 视觉 上 强烈 的 排斥 感 和 跳跃 感 。 这 是 一 种 具备 “ 双 
刃 剑 ”效果 的 配色 方案 ， 使 用 得 当 可 以 很 好 的 提升 界面 视觉 冲击 力 ， 而 使 用 不 当 则 会 使 当前 页 面 
的 配色 变 得 凌乱 和 刺眼 。 通 常 比较 经 典 的 对 比 色 为 红 与 绿 ， 蓝 与 橙 以 及 黄 与 紫 (图 3-58)。 

设计 师 为 页 面 的 主 色 调 再 进行 配色 时 可 以 基于 主 色 调 对 比 色 的 基础 之 上 ， 结 合 相 邻 色 的 
概念 ， 这 样 便 可 延展 出 更 多 对 比 色 系 的 配色 方案 。 例 如 ， 蓝 色 的 对 比 色 为 述 色 ， 那 么 检 色 的 
相 邻 色 为 黄色 以 及 红色 等 ， 这 些 颜 色 就 可 以 作为 监 色 的 对 比 色 系 来 进行 使 用 ， 从 而 起 到 丰富 
画面 的 作用 (如 图 3-59)。 


图 3-58 299 
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这 样 一 来 ， 可 选择 的 配色 方案 观 更 多 了 ， 也 更 具有 规律 性 和 可 控 性 。 那 么 ， 当 界面 中 使 
用 对 比 色 的 配色 方案 时 ， 一 定 要 注意 以 下 几 操 : 

第 一 ， 对 比 色 出 现 以 及 占据 的 配色 比重 要 尽量 低 一 些 。 一 般 对 比 色 出 现在 页 面 中 ， 更 多 
征 对 当前 页 面 的 主 色调 进行 点 睛 使 用 ， 适 当 调和 即 可 。 如 果 对 比 色 占据 面积 太 大 的 话 ， 束 会 
造成 当前 页 面 视觉 效果 太 “ 人 花 ”， 通 党 对 比 色 只 会 占据 整个 界面 配色 中 的 5 免 一 10% 堪 右 ; 第 
二 ， 对 比 色 之 间 要 通过 无 色彩 系 来 进行 分 隔 ， 其 两 者 之 间 的 距离 要 尽量 远 一 些 。 如 果 一 组 对 
比 色 的 距离 太 近 的 话 ， 会 加 剧 视 党 刺激 ， 效 果 非 名 不 好 。 

所 以 ， 当 设计 师 在 初次 接触 与 符 试 页 面 设 计 以 及 配色 中 使 用 对 比 色 中 ， 一 定 要 注意 以 上 所 
提 到 的 两 个 要 操 ， 那 么 页 面 就 会 在 配色 丰 定 的 基础 上 还 能 够 趋 于 视 芝 上 的 平衡 (如 图 3-60)。 
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不 管 我 们 是 使 用 对 比 色 ， 还 是 相 邻 色 ， 当 我 们 试图 使 用 不 同 的 色相 进行 丰富 页 面 时 ， 一 定 
要 控制 好 色相 之 间 的 饱和 上 度 ， 这 样 才能 确保 当 色 相 发 生 改 变 时 ， 视 党 效 果 不 会 凑 乱 。 

颜色 除了 具有 色相 ， 还 具有 色 性 ， 色 性 是 指 色彩 冷暖 及 中 性 色 之 间 的 分 别 。 其 实 颜 色 本 
身 不 具备 冷暖 效应 ， 只 不 过 是 根据 人 们 的 心理 感受 和 主观 意识 ， 将 颜色 分 为 暖色 调 ， 冷 色调 
以 及 中 性 色调 这 三 类 。 颜 色 的 冷暖 对 比 是 界面 设计 最 第 用 的 方法 ， 视 施 对 比 效果 也 最 为 强 
烈 。 上 暖色 主要 有 黄色 、 桦 色 等 ， 上 暖色 一 般 用 于 购物 类 型 网 站 以 及 饮食 服务 类 产品 ， 给 用 户 营 
造 较为 活 涛 、 温 蕊 、 积 极 向 上 的 感觉 。 冷 色 主 要 有 蓝 色 等 ， 常 应 用 于 科技 、 商 务 等 类 型 产 
品 ， 体 现 严谨 、 稳 重 、 清 碍 的 效果 。 所 以 ， 设 计 师 要 根据 不 同 的 行业 定位 以 及 用 户 特 征 来 合 
理 地 选择 冷暖 色 的 使 用 (图 3-61)。 
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那么 ， 图 3-62 所 示 的 两 张 页 面 的 主 色 调 分 别 是 根据 行业 特点 与 用 户 人 群 的 特点 以 冷色 
和 了 暖色 为 主 的 两 种 配色 方 辐 。 左 图 中 的 页 面 所 展示 的 是 以 020 模式 为 主 的 送 餐 类 型 的 产 
品 ， 为 了 凸显 食欲 及 熟食 为 主 的 产品 特点 ， 使 用 红色 比较 适合 。 而 右 图 中 的 产品 主要 是 服务 
于 智能 电器 ， 通 过 手机 对 于 家 用 电器 进行 远程 操作 以 及 家 性 安全 省 理 等 ， 所 以 使 用 蓝 色 可 以 
更 好 的 突出 其 具有 科技 感 的 产品 特点 。 
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尝 在 使 用 冷 上 暖色 做 为 产品 界面 的 主 色调 时 ， 同 时 结合 背景 色 来 配色 效果 更 好 。 上 暖色 和 和 
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深 灰 色调 调和 可 以 达到 很 好 的 效果 。 上 暖色 一 般 用 于 购物 类 型 网 站 、 电 子 商 务 、 儿 章 等 网 站 拓 
多 ， 用 户 感 觉 较为 活 浅 ， 温 世 以 及 积极 向 上 (图 3-63)。 而 冷色 一 般 和 白色 或 浅 灰 色 配 色 可 
以 达到 很 好 的 视觉 效果 ， 常 应 用 于 和 科技、 商务 等 相关 行业 的 视觉 表现 ， 给 入 以 严 谍 、 稳 重 以 
及 清 丈 的 视觉 效果 (图 3-64)。 
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一 般 我 们 在 确定 界面 主 色 调 时 ， 通 第 会 根据 产品 的 行业 特点 、 用 户 人 群 以 及 企业 的 视觉 
形象 来 确定 一 种 主 色调 以 及 和 当前 主 色 调 所 配合 的 辅助 色调 构成 界面 中 的 配色 方案 。 色 彩 的 
主 次 分 明 可 以 使 作品 条 理 清晰 ， 功 能 明确 。 一 般 来 说 ， 我 们 将 色彩 按 功 能 划分 为 ， 主 色 、 辅 
助 色 、 点 睛 色 三 大 类 ， 而 且 在 界面 配色 中 要 严格 遵守 “人 色 不 过 三 ”以 及 “ 脏 色 纯色 不 可 用 ” 
的 原则 。 那 么 这 些 色 系 当中 ， 要 按照 其 存在 的 比例 进行 合理 地 调配 ， 其 效果 才 会 达到 最 优 的 
状态 。 

例如 上 面 我 们 所 总 结 的 ， 除 去 无 色彩 系 ， 主 色调 通常 占据 整个 界面 配色 的 70% 左 右 ， 而 
根据 主 色调 所 确定 的 相 邻 色 则 占据 整个 界面 配色 的 20% 一 25% 左 右 ， 剩 下 的 对 比 色 占 据 
5% 一 10% 左 右 。 我 们 以 花色 为 例 ， 假 如 我 们 确定 了 我 们 所 设计 的 页 面 颜色 是 以 赣 色 为 主 ， 那 
么 其 配色 方案 可 以 如 图 3-65 所 示 。 
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这 里 ， 我 们 重点 强调 一 下 主 色 的 关键 性 。 主 色 决 定 着 界面 的 设计 风格 ， 是 连接 产品 功能 
的 情感 元 素 。 任 何 色 相 都 可 以 成 为 产品 的 主 色 ， 因 为 每 种 色彩 表达 的 色彩 文化 是 不 同 的 ， 所 
以 主 色 表达 的 也 是 作品 的 文化 方 同 。 这 就 需要 我 们 在 设计 初期 对 产品 项 目 深度 分 析 后 ， 提 人 炼 
出 最 为 合适 的 主 色 。 在 不 同 的 界面 设计 和 媒介 设计 中 ， 主 色 运 用 规律 各 不 相同 。 比 如 ， 在 界 
面 设计 之 中 ， 主 色 通 常会 用 于 结构 装饰 之 中 ， 这 有 效 地 统一 了 产品 的 传播 性 。 而 在 banner 和 
海报 设计 里 ， 主 色 多 用 于 背景 之 中 ， 可 以 起 到 强调 突出 的 作用 (图 3-66)。 
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一 方面 ， 我 们 站 在 用 户 的 角度 来 看 ， 为 了 使 用 户 可 以 快速 方便 地 找到 所 需要 的 东 
一 般 来 说 ， 主 色 在 首页 中 会 大 面积 使 用 ， 而 二 级 界面 则 会 将 主 色 更 多 地 放 到 关键 操 
作 操 中 。 
如 果 从 产品 本 里 来 说 ， 我 们 在 使 用 主 色 时 ， 会 更 多 地 考虑 页 面 的 内 容 关 系 ， 更 多 地 关注 
产品 的 功能 作用 。 
最 后 从 视觉 方 面 来 看 ， 当 我 们 要 选择 高 饱和 度 的 色彩 作为 主 色 时 ， 必 然 要 考虑 用 户 长 时 
间 观 看 时 是 舍 会 造成 视觉 疲 筋 。 
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其 次 ， 视 觉 设 计 师 要 学 会 从 对 比 色 中 寻找 辅助 色 。 一 般 来 次， 大 和 家 会 简单 地 认为 面积 大 
的 颜色 束 古 主 色 。 其 实 不 然 ， 大 面积 饱和 度 低 的 颜色 更 容易 被 小 面积 的 高 饱和 度 的 闫 色 “ 抢 
镜 ”。 上 所 以 ， 我 们 一 般 会 选择 纯度 高 的 其 色 作 为 主 色 。 在 界面 设计 中 ， 互 补 色 的 使 用 ， 会 给 
用 户 带 来 强烈 的 视 沉 冲击 ， 情 感 表 达 会 更 加 丰富 浓烈 ， 这 是 传播 情感 的 最 好 方式 。 一 般 来 
说 ， 适 合 比较 伶 张 的 场景 使 用 。 但 是 当 用 户 长 时 间 观 看 高 饱和 度 颜色 时 ， 容 易 产 生 视 党 疲 
天 ， 那 么 我 们 就 要 通过 合理 的 搭配 ， 控 制 其 使 用 面积 ， 将 其 用 于 核心 位 置 。 

下 面 忌 结 一 下 我 们 在 配色 中 第 用 到 的 配色 方法 ， 这 几 种 配色 方 柔 通常 可 以 进行 综合 使 
用 ， 相 互 配合 。 

a) 无 色 设 计 : 黑 日 次 等 无 色彩 系 进行 搭配 ， 通 常 对 图 片 选择 、 页 面 的 布局 结构 以 及 文 
字 排 版 的 要 求 较 高 。 

b) 冲突 设计 : 主 色 调 以 及 其 对 比 色 次 配 的 使 用 ， 例 如 赣 杰 ， 红 绿 ， 黄 乐 等 斋 色 的 措 
配 ， 在 使 用 的 时 候 要 注意 对 比 色 的 使 用 量 要 少 ， 并 且 远 离 主 色调 进行 使 用 。 

c) 音色 设计 : 色相 保持 一 致 ， 仅 利用 其 明度 进行 变化 来 使 用 ， 一 般 此 配色 方案 较为 小 
众 ， 同 样 对 页 面 布 局 以 及 文字 排版 ， 页 面 细 节 营 造 的 要 求 较 高 。 

d) 相 邻 色 设 计 : 相 邻 色 设 计 通 第 以 红 橙 ， 黄 绿 ， 昨 紧 或 站 绿 ， 黄 橙 ， 红 紧 等 烦 色 配合 
使 用 ， 在 丰 宇 页面 的 同时 也 不 会 造成 用 户 的 视觉 疲 苑 。 

除 此 之 外 ， 我 们 还 可 以 利用 上 文 所 提 到 关于 色彩 的 冷暖 关系 使 我 们 的 作品 更 加 丰 军 
出 彩 。 

在 本 章 内 容 中 ， 主 要 为 大 家 介绍 了 关于 色彩 的 属性 以 及 如 何 利用 色彩 的 三 种 属性 来 进行 
配色 的 方法 以 及 在 色彩 之 间 相 互 平衡 的 方法 。 在 设计 中 ， 需 要 设计 师 能 够 掌握 更 多 关于 配色 
的 扩 巧 ， 并 对 色彩 有 细 有 民 的 情感 表达 ， 从 而 使 界面 的 视觉 效 末 不 单调 。 对 于 刚刚 接触 设计 工 
作 的 设计 师 来 说 ， 这 就 对 于 其 学 习 能 力 以 及 总 结 能 力 就 有 了 更 高 更 新 的 要 求 ， 希 望 大 家 能 从 
中 总 结 出 适用 于 自己 的 一 套 配色 方法 。 


105 


第 4 音 


中 


表面 中 的 细 攻 营造 


4.1 伪 局 平 化 的 时 代 
4.2 经 典 的 卡片 式 设计 
4.3 界面 设计 中 的 细节 


第 4 章 


表面 中 的 细节 营造 


4.1 伪 局 平 化 的 时 代 


随 着 互联 网 时 代 界 面 设计 风格 的 逐步 发 展 ， 我 们 发 现 界 面 设 计 的 视觉 效果 已 经 从 之 
前 的 拟 物 化 设计 风格 (Quasiphysical Design) 癌 轻 量化 的 设计 风格 转变 (如 图 4-1)。 


图 4-1 
2010 年 ， 微 软 推出 了 全 新 的 封闭 型 移动 端 操作 系统 Windows Phone， 它 所 种 来 的 设计 语 
言 (Metro UI) 给 界面 设计 注入 了 一 股 新 的 力量 ， 奢 就 是 后 来 被 大 家 所 熟知 的 局 平 化 设计 
(如 图 4-2 )。 
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互联 网 界面 设计 风格 就 在 这 个 时 期 及 生 了 新 的 改变 。 局 平 化 设计 由 最 初 的 出 现 ， 再 到 曼 
延 ， 最 后 成 为 几乎 履 冲 全 球 界 面 设 计 的 语言 ， 其 及 展 速度 和 势头 非 负 快速 和 迅猛 。 局 平 化 的 
及 展 为 何 会 这 么 快速 ? 局 平 化 设计 又 会 给 设计 师 以 及 工程 师 的 工作 方式 市 来 哪些 改变 ?这些 
是 本 节 要 重点 介绍 的 内 容 。 

虽然 局 平 化 设计 风格 已 成 为 了 业界 主演， 但 是 在 其 后 续 的 发 展 当中 也 发 生 了 一 些微 妙 的 
变化 和 风格 上 的 延展 。 纯 局 平 化 设计 在 界面 设计 中 的 出 镜 京 已 经 不 是 很 品 了 ， 随 看 时 间 的 推 
移 以 及 设计 师 的 不 断 思 考 和 推 融 ， 局 平 化 开始 变 得 不 那么 局 平 了 。 
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微软 推出 的 PC 六 Windows 操作 系统 (Windows 8 为 开端 ) 以 及 移动 端 Windows 
Phone 以 及 Windows RT 的 Metro 界面 古 局 平 化 设计 的 代表 产品 ， 也 是 微软 确实 是 局 平 
化 风格 的 引入 者 。 

在 局 平 化 设计 引入 之 前 的 ， 互 联网 界面 设计 更 多 的 是 以 拟 物 化 设计 风格 为 主导 的 。 最 典 
型 的 是 以 iOS 系统 中 拟 物 化 的 设计 为 代表 。 主 要 是 通过 质感 来 还 原 用 户 真实 的 世界 和 视 视 奖 
果 ， 产 生 情 感 上 的 共鸣 ， 让 用 户 感 觉 到 与 实物 的 接近 。 在 那个 时 代 ， 拟 物化 设计 也 成 为 了 视 
觉 设 计 所 追求 的 设计 高 度 和 软件 技能 的 衡量 标准 。 直 到 2013 年 ，iOS7 在 升级 以 后 也 开始 朝 
扁平 化 设计 风格 转变 了 《如 图 4-3)， 我 们 可 以 对 比 一 下 iOS6 系统 和 iOS7 系统 之 间 在 视觉 
和 设计 风格 上 的 巨大 变化 。 
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谷歌 在 2014 年 推出 了 著名 的 Material Design (材料 设计 语言 )， 也 在 其 设计 语言 中 加 入 
了 关于 扁平 化 的 定义 。Material Design 是 由 谷歌 所 开发 的 一 套 设计 语言 ， 在 这 个 设计 语言 中 
事实 上 还 是 利用 了 遍 平 化 设计 精髓 。 虽 然 在 其 基础 之 上 增加 了 一 些 比 较 含 蓄 的 拟 物 化 的 设计 
创造 了 一 种 全 新 的 设计 概念 ， 其 设计 的 核心 就 是 设计 师 所 熟知 的 “卡片 式 设 计 ”， 但 是 其 本 
质 还 是 由 局 平 化 的 设计 理念 所 派生 出 来 的 设计 语言 ， 图 4-4 所 示 为 在 原生 安 卓 中 利用 
Material Design 设计 语言 完成 的 界面 设计 效果 。 
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4.1.1 什么 是 局 平 化 设计 ? 


那 到 奔 什 么 才 是 局 平 化 设计 呢 ? 其 实 对 于 局 平 化 设计 ， 一 直 都 没有 很 权威 的 定义 ， 但 根 
据 其 设计 的 特点 可 以 总 结 如 下 。 

届 平 化 设计 是 一 种 纯 二 次 元 的 设计 风格 ， 完 全 抛弃 了 例如 :; 渐变 ， 投 影 ， 羽 化 ， 冬 面 浮 
雕 等 拟 物 设计 手法 ， 仅 利用 色 块 拼 贴 进行 视 沉 表现 的 一 种 抽象 化 的 设计 语言 。 纯 局 平 化 设计 
以 现 有 Windows 探 作 系 统 、Windows Phone 系统 的 设计 风格 等 为 代表 。 


| 2 @ . 2 O Wlelalel: 
:= 。 05 March 


1. 没有 元 余 的 拟 物 设 计 效 果 
视觉 设计 的 优 劣 其 实 是 守恒 的 ， 本 质 上 是 组 成 视觉 设计 所 需要 的 设计 及 元 系 一 个 此 消 
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役 长 的 过 程 。 局 平 化 的 设计 核心 对 于 界面 设计 来 说 ， 极 大 的 削弱 了 拟 物化 设计 的 设计 理 
念 ， 其 至 早期 是 完全 据 莽 的 。 所 以 ， 设 计 师 在 进行 局 平 化 界面 设计 的 过 程 当 中 ， 和 需要 从 闸 
色 ， 排 版 以 及 图 片 搭 配 等 方面 进行 深入 研究 。 图 4-6 中 所 给 到 的 图 标 以 及 界面 设计 便 是 这 
样 的 道理 。 


2. 配色 要 明 腕 清晰 但 不 要 使 用 纯色 

局 平 化 设计 的 精 稻 便 是 利用 颜色 拼 贴 来 进行 视 沉 表现。 所以， 对 于 颜色 的 把 控 和 要 求 是 
局 平 化 设计 当中 非常 重要 的 一 个 环节 。 而 且 在 iOS 以 及 安 卓 的 设计 语言 中 对 于 选择 颜色 也 有 
看 明确 的 规定 。 

设计 师 在 使 用 颜色 的 时 候 ， 需 要 重点 注 意 其 选 色 的 方式 和 方法 。 还 是 那 句 话 “ 唯 脏 色 与 
高 饱和 颜色 不 可 用 ”。 在 这 里 重点 介绍 一 下 后 者 ， 由 于 局 平 化 设计 将 界面 配色 的 使 用 率 推 癌 
了 一 个 高 漳 ， 如 果 在 界面 中 大 量 使 用 纯色 的 话 ， 就 会 让 整个 画面 看 上 去 非常 刺眼 。 因 为 颜色 
纯度 越 高 ， 对 于 眼球 的 刺激 就 会 越 大 ， 当 利用 Photoshop 选取 颜色 时 ， 应 按照 图 4-7 所 标注 
出 来 的 范围 进行 选取 ， 效 果 会 更 好 。 


1B: 237 


只 有 Web 颜色 


郑 2b98ed 
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此 外 ， 当 进行 扁平 化 界面 设计 的 时 候 ， 最 好 合理 地 利用 相 邻 色 和 对 比 色 进行 穿插 ， 以 便 

于 达到 最 佳 的 配色 效果 〈 如 图 4-8)。 一 般 主 色调 和 相 邻 色 会 占据 绝 大 部 分 的 配色 区 域 ， 而 对 
比 色 只 作为 调和 色 进 行 点 级 。 
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3. 大 量 使 用 较为 简洁 风格 的 元 素 ， 以 色 块 拼 贴 为 主 
此 处 所 指 的 是 图 标的 使 用 ， 文 字 的 排版 搭配 以 及 纹理 的 使 用 ， 颜 色 清新 亮丽 并 且 凸 显 简 


> | 名 
约 干 净 的 设计 风格 ， 如 图 4-9 所 示 为 个 人 进行 数据 可 视 化 的 概念 设计 的 练习 稿 以 及 PC 端 网 
站 后 台 的 视觉 效果 。 
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一 一 视觉 营造 的 风向 标 

忆 结 一 下 ， 对 于 局 平 化 设计 来 说 ， 细 市 依然 是 其 生存 的 根本 ,但 是 细 市 的 表现 已 经 不 再 
是 追求 极致 的 拟 物 ， 而 是 转化 成 了 布局 、 配 色 、 文 字 排 版 等 方面 ， 其 实 完 美的 局 平 化 设计 需 
要 设计 师 从 规范 性 、 视 觉 风格 一 致 性 、 细 节 、 配 色 、 图 卢 搭 配 、 文 字 排 版 等 多 方面 进行 把 控 
和 平衡 ， 对 设计 的 要 求 其 实 更 高 更 复杂 了 。 


4.1.2 局 平 化 设计 的 发 展 


局 平 化 风格 始 于 北欧 平面 设计 风格 ， 早 期 应 用 于 平面 设计 当中 ， 其 设计 风格 包括 了 栅 格 
化 以 及 文字 排版 等 方式 。 后 期 也 逐渐 在 网 页 和 APP 的 界面 设计 当中 使 用 ， 包 括 文字 的 大 
小 、 文 字 与 文字 之 间 的 距离 大 多 经 过 了 一 系列 严格 地 考 完 。 

早期 局 平 化 设计 风格 主要 通过 矢量 抽象 的 元 素 设 计 进行 展现 ， 满 足 用 户 最 本 质 的 需求 ， 
也 如 是 获取 信息 ， 但 是 经 过 长 期 及 展 之 后 装饰 性 的 元 系 逐 渐 丘 据 较 大 的 比重 ， 基 至 超越 了 设 
计 初 囊 。 因 此 设计 师 们 开始 强调 展现 信息 的 功能 以 轮 化 多 余 的 装饰 ， 在 此 设计 过 程 当中 ， 文 
字 排 版 和 天 量 元 素 的 使 用 以 及 色 块 拼接 在 视觉 设计 中 被 推 上 了 蜗 漳 。 在 文字 排版 中 通过 对 文 
字 排 版 中 的 大 小 、 明 暗 对 比 天 系 的 调整 来 展现 信息 ， 甚 至 可 以 通过 文字 的 设计 来 展现 产品 视 
觉 设 计 的 性 格 ， 图 4-10 所 展示 的 束 是 这 一 时 期 的 印刷 产品 的 视觉 风格 。 


图 4-10 


其 设计 风格 的 精髓 在 于 以 固有 的 平面 设计 风格 ， 突 出 其 四 平 八 稳 的 视觉 符号 的 传达 


设计 ， 让 人 印象 深刻 。 并 且 视 觉 效 果 更 加 突出 整洁 、 严 说、 工整 、 理 性 化 的 特征 ， 意 在 
传达 准确 的 信息 给 观看 者 ， 将 信息 传递 作为 产品 最 为 本 质 和 主要 的 方 癌 进行 塑造 〈 如 
图 4-11 )。 
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图 4-11 


2010 年 ， 人 微软 推出 Windows Phone 系统 时 ， 将 其 设计 语言 命名 为 Modern UI， 且 利用 和 矩 
形 色 块 为 功能 区 域 的 “动态 磁 贴 ”作为 其 设计 的 重点 ， 使 用 户 在 浏览 该 系统 手机 界面 时 可 以 
更 加 快速 地 找到 所 需要 的 信息 ， 减 少见 余 的 视觉 元 系 ， 从 而 达到 用 户 与 信息 的 “0” 距 离 接 
触 。 设 计 师 所 熟悉 的 “Metro” 和 “Modern UI” 其 实 是 一 回 事 ， 后 来 国内 根据 其 英文 命名 的 
含义 将 其 取 名 为 “局 平 化 设计 ”， 视 党 设 计 师 们 也 开始 尝试 利用 一 些 色 块 拼 贴 来 重 狐 设计 和 
定义 图 标 和 界面 ， 所 以 局 平 化 的 设计 产物 开始 迅速 出 现 〈 图 4-12)。 


图 4-12 
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扁平 化 风格 被 大 众 熟 知 是 通过 2012 年 Windows 8 上 市 推动 的 ， 当 时 对 于 设计 师 来 讲 更 
多 的 是 在 讨论 视觉 设计 最 终 的 走 辐 。2012 年 前 后 ， 手 机 操作 系统 主要 以 iOS 系统 的 拟 物 化 
设计 风格 和 新 兴 的 局 平 化 设计 风格 为 主 ， 平 分 秋色 ， 所 以 很 多 的 从 业者 都 在 讨论 和 观望 界面 
视觉 设计 的 最 终 走 癌 。 

这 个 问题 在 2013 年 得 到 了 明确 的 答案 ， 也 开启 了 局 平 化 设计 时 代 。 随 着 iOS 7 的 升级 ， 
带 有 鲜明 特征 的 iOS 风格 的 局 平 化 设计 开始 影响 其 广大 的 第 三 方 应 用 ， 可 以 看 到 ， APP Store 
中 的 第 三 方 应 用 纷纷 开始 朝 局 平 化 的 方 同 进行 了 界面 形象 的 升级 与 再 设计 ， 以 便 能 够 啊 应 局 平 
化 时 代 的 到 来 。 以 腾讯 QQ 为 例 ， 图 中 展示 了 QQ 的 形象 分 别 在 2014 年 、2015 年 以 及 2016 
年 的 效果 ， 可 以 清晰 的 看 到 扁平 化 设计 在 其 形象 的 设计 中 的 体现 (如 图 4-13 )。 


2014 2015 2016 


图 4-13 


2014 年 谷歌 推出 了 全 新 的 系统 设计 语言 Material Design， 这 为 扁平 化 设计 又 注入 了 新 鲜 
的 血液 。 随 看 世界 三 大 手机 操作 系统 纷纷 回忆 平 化 的 徘 扰 ， 界 面 设计 最 终 以 局 平 化 设计 风格 
为 主导 问 前 及 展 ， 届 平 化 设计 风格 也 成 了 视觉 设计 的 一 种 风格 。 


4413 局 平 化 设计 的 优 缺 点 


扁平 化 设计 风格 的 界面 是 由 单 色 的 规矩 的 矩形 色 块 组 成 ， 大 字体 并 且 伴 有 文字 排版 ， 简 
约 时 尚 的 动 效 ， 现 代 感 以 及 科技 感 十 足 。 其 交互 的 核心 在 于 功能 本 身 的 使 用 ， 完 全 抛弃 了 抑 
余 的 拟 物 元 素 ， 使 用 更 直接 的 图 形 来 完成 信息 的 送 达 。 

1， 扁 平 化 的 优点 

首先 ， 简 约 而 不 简单 ， 扁 平 化 设计 使 用 栅 格 化 进行 设计 ， 利 用 鲜明 的 色彩 让 界面 变 得 焕 
然 一 新 。 其 次 ， 突 出 内 容 主 题 ， 减 弱 各 种 多 余 的 元 素 ， 让 用 户 更 加 专注 于 信息 本 身 ， 在 扁平 
化 的 视觉 影响 下 界面 和 产品 会 显得 非常 简单 易 用 。 最 后 ， 让 设计 更 加 简约 ， 使 开发 变 得 更 加 
容易 ， 

优秀 的 扁平 化 设计 只 需要 考虑 良好 而 丰富 的 框架 ， 栅 格 布局 和 文字 排版 ， 配 色 以 及 配 图 
的 高 度 一 致 性 ， 而 不 再 需要 考虑 更 多 的 阴影 、 高 光 、 渐 变 等 拟 物 手法 。 但 简约 不 等 于 简单 ， 
遍 平 化 也 将 文字 排版 ， 配 色 等 设计 手法 提 到 了 更 高 的 位 置 ， 对 其 要 求 也 会 更 加 严 苛 ， 

2， 扁平 化 的 缺点 

设计 是 需要 付出 一 定 的 学 习 成 本 的 ， 并 且 由 于 完全 担 弃 了 拟 物化 的 设计 手法 ， 无 法 对 于 
真实 环境 进行 还 原 ， 无 法 从 情感 上 和 用 户 达成 共鸣 ， 所 以 扁平 化 设计 风格 传达 的 感情 并 不 丰 


114 


界面 中 的 细节 营造 
富 ， 有 时 甚至 会 过 于 冰冷 。 设 计 师 在 尝试 如 何 能 够 在 保证 扁平 化 设计 优点 的 同时 改进 其 缺 
陷 ， 成 为 更 为 优化 的 设计 语言 。 所 以 ， 扁 平 化 的 设计 风格 也 开始 有 所 改变 ， 随 着 “ 伪 扁 平 化 
设计 ”风格 的 逐步 出 现 和 发 展 ， 原 先 的 扁平 化 开始 变 得 不 扁平 了 。 


4.1.4” 伪 局 平 化 设计 风格 


纯 扁 平 化 设计 伴随 着 其 与 生 俱 来 的 优点 的 同时 ， 也 存在 其 不 可 避免 的 缺陷 ， 所 以 ， 设 计 
师 开 始 等 试 给 局 平 化 设计 加 入 一 些 “ 情 感 ” 来 增加 与 用 户 之 间 的 共鸣 。 局 平 化 开始 出 现 了 光 
源 ， 其 至 是 一 些 投 影 、 渐 变 等 细 行 。 这 么 做 看 似 与 局 平 化 设计 的 初衷 相 怪 ， 但 是 实践 证 明 ， 局 
平 化 设计 加 入 一 些 含蓄 的 拟 物化 手法 修饰 后 确实 成 了 界面 设计 风格 的 延续 和 主导 ， 经 典 的 “ 卡 
瞩 式 设计 ” 便 是 这 一 时 期 的 代表 。 有 很 多 声音 认为 这 是 拟 物化 回潮 的 表现 ， 而 作者 认为 这 其 实 
是 局 平 化 的 “进化 论 ”。 图 4-14 所 示 便 是 盆 局 平 化 设计 与 纯 局 平 化 设计 的 示意 对 比 。 


4-14 


那么 ， 对 于 伪 局 平 化 设计 来 说 ， 视 党 上 有 哪些 手法 呢 ? 

1. 加 入 长 投影 效果 

长 投影 效果 在 一 段 时 间 里 是 很 流行 的 ， 设 计 师 尝试 在 局 平 化 的 世界 中 加 入 光源 ， 并 且 延 
伸 投 影 。 一 般 长 投影 都 是 45”， 给 图 标 加 入 了 一 种 深度 和 起 伏 感 。 不 过 其 阴影 也 是 局 平 的 ， 
一 般 以 无 渐变 明暗 或 者 颜色 训 退 效果 为 主 ( 如 图 4-15 )。 


4-15 


2， 带 有 阴影 以 及 渐变 的 扁平 化 设计 
虽然 加 入 了 投影 和 渐变 ， 但 是 伪 扁 平 化 设计 的 效果 都 是 相对 含 鞍 的， 不 会 像 拟 物化 设计 
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效果 那么 浮夸， 所 以 需要 设计 师 在 局 平 化 和 拟 物 手法 之 间 寻 求 平衡 。 这 种 手法 也 被 大 量 的 运 
用 于 图 标 和 界面 的 视觉 设计 中 ， 用 来 营造 所 谓 的 “细节 ”以 打动 用 户 的 内 心 。 实 践 证 明 ， 
这 样 做 的 效果 是 很 不 错 的 (图 4-16)。 


3. 扁平 化 的 3D 效果 

这 个 概念 看 上 去 像 是 一 个 那 论 ， 但 是 确实 存在 。 局 平 化 设计 不 仅仅 是 二 维 的 ， 也 有 设计 
师 将 其 设计 成 三 维 的 效果 进行 展现 。 这 给 用 户 一 种 眼前 一 亮 的 感觉 ， nT 
做 。 以 图 标 设 计 为 例 ， 虽 然 图 标 被 设计 成 三 维 但 依然 遵循 了 扁平 化 大 色 块 拼 贴 的 设计 精 和 
并 在 此 基础 上 加 入 了 新 的 视觉 元 素 。 图 417 所 示 ， 便 是 3D 扁平 化 设计 效果 ， 也 是 代 扁 平 化 
风格 非常 重要 的 代表 之 一 (图 4-17)。 


4.1.5 关于 MBE 设计 风格 


随 着 Dribbble 网 站 上 一 位 设计 师 “MBE” 所 设计 的 融合 了 插画 风格 的 图 标 一 夜 爆 红 ， 
MBE 风格 在 2016 年 一 发 不 可 收拾 ， 迅 速 席卷 全 球 。 其 图 标 作品 风格 设计 包含 了 简约 、 绚 
丽 、 手 绘 等 一 系列 新 元 素 。 这 可 以 算是 一 种 全 新 的 风格 ,但 也 是 基于 扁平 化 设计 风格 所 演变 
的 风格 之 一 。 由 于 这 种 新 的 设计 风格 没有 一 个 官方 名 称 ， 那 束 暂 用 设计 师 的 名 称 将 其 称 之 为 
MBE Design。 目 前 已 有 不 少 的 设计 师 也 开始 绘制 类 似 风格 的 设计 作品 ， 可 以 发 现 MBE 风格 
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已 经 逐渐 成 为 一 个 小 的 设计 趋势 《图 4-18)。 


图 4-18 


MBE Design 包含 以 下 特点 : 

a) 带 有 较 粗 的 深 灰 色 摘 边 ， 样 式 为 “正片 登 底 ” 效 果 。 

b) Q 版 卡通 形象 ， 带 有 鲜明， 干净 的 配色 ,利用 大 色 块 拼接 而 成 。 

c) 运用 圆 角 元 素 抽 多， 圆滑 的 线条 组 成 ， 止 显 可 爱 的 设计 情感 。 

d) 常用 快速 矢量 绘制 ， 很 少 使 用 渐变 色 ， 而 且 颜 色 通 常 带 有 和 描 边 错位 的 效果 来 进行 
展示 。 


4.1.6 局 平 化 设计 的 方法 


由 于 局 平 化 设计 极 大 地 降低 了 拟 物化 的 程度 ， 虽 然后 期 以 伪 局 平 化 设计 为 主 ， 但 依然 保 
留 了 局 平 化 设计 的 精髓 。 所 以 ， 这 残 要 求 设计 师 在 框 染 结 构 、 配 色 、 图 片 搭配 、 拟 物 细 市 以 
及 文字 排版 等 几 方面 同时 提升 ， 缺 一 人 不可。 所 以 对 于 视 帝 设计 师 的 综合 要 求 更 蜗 了 。 行 业 中 
存在 一 种 声 首 ， 认 为 届 平 化 设计 降低 了 视觉 设计 的 门槛 ， 这 种 看 法 其 实 是 大 错 特 错 。 那 么 ， 
设计 师 在 设计 局 平 化 风格 的 界面 时 应 该 注意 哪些 方面 呢 ? 

a) 丰富 的 布局 展示 。 利 用 列表 、 标 签 、 定 格 等 布局 方式 的 综合 使 用 来 丰富 界面 的 
框架 。 

b) 颜色 的 合理 使 用 。 取 色 时 要 选择 鲜 涡 ， 干 疤 并 且 不 要 使 用 高 饱和 度 的 色彩 进行 
设计 。 

c) 丰富 的 排版 效果 。 利 用 文字 的 信息 层级 所 决定 了 页 面 文学 的 跳跃 紊 ， 在 大 小 、 粗 
细 、 颜 色 等 方面 使 得 文字 排版 更 具有 灵活 性 。 

d) 配 图 的 考究 。 使 用 高 清 并 且 颜 色 明 亮 清晰 的 图 片 加 以 配合 。 

e) 配合 工具 图 标 进行 点 绥 。 
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一 一 视 党 营造 的 风向 标 

对 于 局 平 化 设计 来 说 ， 需 要 同时 考虑 以 上 五 个 元 素 ， 丰 是 和 优化 视觉 界面 设计 。 但 是 仅 
仅 做 到 以 上 这 五 后 ， 还 古 很 难 去 实现 一 个 优秀 的 局 平 化 设计 产品 。 必 须 在 保证 页 面 设计 的 规 
拖 性 以 及 视觉 风格 的 一 致 性 的 基础 之 上 ， 来 权衡 和 使 用 这 些 视 觉 元 素 的 构成 。 这 样 ， 界 面 才 
能 达到 一 个 较为 优秀 的 视 沉 效果。 


4.2 ”经典 的 卡片 式 设 计 


现 如 今 的 移动 站 UI 设计 中 ， 卡 刻 式 设计 择 起 了 半壁 江山 ， 它 随 性 目 由 叉 充 满 了 远 辑 
性 ， 它 正在 变 得 更 加 流行 。 下 面 介 绍 卡 卢 去 设计 。 

自 完 ， 必 须要 先知 道 什么 是 卡片 式 设计 。 在 各 个 APP 中 党 第 见 到 的 那些 承载 看 图 片 、 
文字 等 内 容 的 矩形 区 块 就 是 所 说 的 卡片 ， 卡 片 存 在 的 方式 多 种 多 样 ， 当 你 点 击 它 的 时 候 能 
够 看 到 更 多 详细 的 内 容 。 一 般 把 这 种 容器 称 之 为 “卡片 ”” 从 另 一 个 方面 来 说 ， 它 也 指 那 
些 包含 一 定 图 片 和 文本 信息 在 内 的 长 方形 ， 作 为 指 问 更 多 详细 信息 的 一 个 入 口 。 如 今 ， 在 
保证 界面 具有 优秀 可 用 性 的 同时 ， 卡 瞩 陈 的 设计 甚至 成 了 平衡 界面 美学 的 默认 做 法 。 因 为 
卡 记 很 方便 的 显示 出 界面 中 的 内 容 是 由 不 同 的 元 素 组 成 的 《如 图 4-19)。 
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图 4-19 


其 次 ， 要 知道 卡片 式 设计 的 起 源 。 卡 厂 式 设计 正在 席卷 科 拉 者 ， 但 作为 一 种 内 容 的 塞 
传媒 介 ， 卡 片 已 经 存在 了 很 长 时 间 。 公 元 9 世纪 ， 中 国 就 使 用 卡 放 来 玩 游戏 ;17 世纪 时 ， 
伦敦 的 商人 利用 卡 卢 来 招揽 生意 ，18 世纪 ， 欧 洲 贯 族 家 寿 的 仆人 会 用 卡片 癌 主人 介绍 即将 
登门 拜访 的 贵宾 ， 而 人 们 交换 名 所 的 传统 也 已 持续 数 百年 。 又 比如 说 ， 人 们 会 互 赠 生日 卡 
请 、 资 卡 ， 人 们 的 钱包 里 和 暑 满 了 信用 卡 、 借 记 卡 和 会 员 卡 (当然 还 有 里 份 证 和 鸭 照 )。 在 计 
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算 机 技术 没有 普及 之 前 ， a 使 用 卡 户 来 调度 飞机 。 电 影 担 摄 中 使 用 的 故事 板 也 采用 了 
卡 卢 格式 ， 同 漫画 相似 ， 每 一 张 图 〈 卡 户 ) 都 代表 了 一 个 电影 中 的 场景 。 照 片 又 何 答 不 是 
We 张 讲 述 厦 独特 故事 的 卡片 。 男 外 还 有 旅途 中 寄 往 杀 朋 的 
明 信 厂 ， 等 等 。 

对 于 卡片 式 设计 的 卡片 来 说 ， 它 们 普 志 有 两 种 用 途 : 作为 界面 或 作为 界面 流 的 中 断 〈( 通 
第 以 广告 的 形式 )。 

a) 卡片 作为 界面 。 有 时 你 甚至 看 不 到 卡片 的 设计 形态 ， 因 为 它们 和 屏 徐 完美 重合 了 。 
但 如 果 仔 细 看 ， 仍 然 可 以 识别 出 它 采 用 卡片 式 设 计 。 卡 片 式 界面 通常 整体 作为 一 个 可 触 元 
系 。 无 论点 击 或 滑动 至 屏幕 上 任意 位 置 ， 都 可 操作 。 在 游戏 界面 中 应 用 卡片 式 设 计 也 是 一 个 

b) 卡片 作为 界面 流 的 中 断 ， 卡片 式 设计 也 经 第 以 同 下 滑动 履 盖 屏 大 的 方式 ， 用 于 移动 
端 或 APP 广告 。 

与 界面 式 卡 厂 不 同 的 是 ， 这 些 卡 厂 包 含 两 种 链接 一 一 强 链 接 和 弱 链 接 。 可 以 通过 超 强 链 
接 跳 转 至 产品 广告 页 。 点 击 弱 链接 则 返回 上 一 个 界面 ， 一 般 来 说 能 链 接 很 难 被 点 击 。 

从 用 户 体 验 来 看 ， 广 告 与 整体 界面 的 和 谐 度 比较 高 。 虽 然 这 样 广告 会 占 满 屏幕 ， 但 并 不 
会 给 用 户 造 成 太 多 困扰 ， 因 为 你 仅仅 在 屏 硕 卡 厂 顶端 合 加 了 广告 卡片 ， 用 户 可 以 关闭 或 者 忽略 
它 。 卡 片 帮 助 用 户 快 速 浏览 信息 ， 用 视 芝 风格 一 致 的 广告 提供 直接 的 商业 价值 (图 4-20)。 
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图 4-20 
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一 一 视觉 营造 的 风向 标 
4.2.1 卡 卢 内 容 至 上 


卡 厂 可 以 承载 不 同类 型 的 内 容 ， 因 而 成 为 内 容 型 网 站 和 APP 的 完美 容 邢 一 一 这 种 通用 
的 框 染 不 会 拒绝 任何 内 容 。 卡 片 的 元 素 可 以 包含 : 照片 、 文 本 、 视 频 、 优 惠 券 、 首 乐 、 付 球 
阁 上 号 、 注 册 或 表单 、 游 戏 数据 、 社 交 媒 体 注 或 分 诗 、 交 励 信 息 、 链 接 以 及 以 上 元 素 的 组 合 。 
这 样 做 的 好 处 是 用 卡片 承载 内 容 信息 ， 层 次 简单 易 懂 ， 用 户 易 于 请 动 浏览 。 典 型 布局 中 ， 愤 
幕 中 每 张 卡片 地 位 相等 ， 不 存在 一 个 卡 户主 寻 其 他 的 情况 。 多 张 卡 户 井然 有 序 排列 ， 用 户 目 
主 选择 他 们 想 点 击 的 卡 厂 进行 操作 (如 图 4-21)。 
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图 4-21 


42.2 ”卡片 设计 的 优势 


对 于 初来乍到 的 用 户 ， 卡 卢 云 设计 提供 了 最 基本 的 功能 操作 。 但 这 却 是 移动 端 卡 片 
设计 流行 和 易 用 的 最 重要 原因 。 用 户 认 为 卡 卢 简单 易 恒 的 原因 在 于 数字 界面 卡片 来 源 于 
实物 卡片 。 数 字 卡 片 具有 同样 的 行为 方式 ， 用 户 不 必 考 虑 事情 如 何 肥 生 ， 可 目 然 而 然 的 
创建 舒适 的 用 户 体 验 。 在 数字 领域 的 应 用 程序 中 ， 卡 片 式 设计 提升 了 操作 行为 体验 。 从 
妨 一 方面 来 想 ， 当 用 户 与 卡片 进行 交互 时 ， 可 以 分 成 几 种 行为 模式 。 卡 厂 通 第 会 做 三 件 
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事 : 记录 信息 、 用 信息 吸引 用 户 或 提醒 用 户 信 息 。 根 据 卡 厂 内 容 元 素 ， 将 卡片 进一步 细 
化 为 不 同类 型 容器 。 第 一 ， 客 述 : 卡 放 以 瀑布 流 形 式 出 现 ， 同 时 创建 事件 发 展 的 时 间 
轴 。 第 二 ， 发 现 : 卡片 能 让 相关 内 容 上 自然 地 呈现 出 来 。 采 用 网 格 或 滩 布 流 布 局 时 ， 使 用 
淡 入 效果 展现 卡片 ， 会 让 用 户 知 得 好 玩 和 里 在 其 中 。 例 如 ， 当 你 同 左 或 同 右 滑动 ， 展 现 
符合 你 口味 的 歌曲 。 第 三 ， 对 话 : 由 于 卡片 是 相对 独立 的 ， 他 们 能 够 完美 展示 正在 进行 
的 对 话 。 第 四 ， 工 作 流 : 卡片 可 以 将 竺 办 事项 快速 归 类 。 人 例如， 用 Evernote 可 以 创建 不 
同 笔记 或 竺 办 事项 的 卡片 。 当 用 户 删 除 它 们 时 ， 剩 余 的 卡片 按照 初始 顺序 重新 排列 。 现 
在 ， 从 多 设备 视角 考虑 卡片 。 在 应 用 中 ， 卡 片 作为 承载 内 容 的 容器 存在 ， 不 同 用 户 可 以 
在 其 他 应 用 或 设备 上 浏览 查看 (图 4-22 )。 


The Web We Have to $ave 


图 4-22 


4.2.3” 卡 三 的 组 织 性 


就 像 在 生活 中 使 用 卡片 一 样 ， 对 设计 师 和 用 户 而 言 ， 卡 请 必 须 很 方便 使 用 。 当 你 设计 卡 
片 时 ， 需 要 做 一 些 重要 的 决定 : 合适 的 卡片 尺寸 ， 恰 当 的 视觉 风格 。 而 第 用 的 卡片 尺寸 有 几 
个 选择 : 小 尺寸 、 摘 要 形式 的 卡 请 ; 中 等 尺寸 的 卡片 ， 全屏 卡 片 ， 装 在 其 他 界面 元 素 之 上 的 
弹出 式 卡 厂 。 

卡片 在 视觉 美观 上 度 上 也 在 不 断 进 步 美化 ， 比 如 瀑布 流 ， 它 起 源 于 Pinterest， 现 在 仍 非 沼 
沈 行 ， 但 这 种 形式 通 沼 在 视觉 上 缺乏 辨识 大。 人 微软 的 Metro 风格 、 局 平 化 卡片 是 针对 APP 
和 移动 设备 的 设计 答 试 之 一 。Metro 风格 现在 并 不 第 见 了 ， 但 局 平 化 这 一 趋势 继续 友 扬 光 
大 ， 并 演化 成 为 一 种 受 欢 迎 的 卡片 样 式 〈 图 4-23)。 
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中 ， 这 样 保证 了 很 强 的 灵活 性 。 目 


虽 格 是 一 种 有 效 的 经 典 布 局 ， 卡 片 被 整齐 封 六 在 
前 杂志 风格 卡片 开始 在 更 多 应 用 中 涌现 ， 尤 其 在 新 闻 网 站 或 需要 展现 大 量 文本 的 应 用 中 。 


Flipboard、CNN 和 NEWSIFY 都 使 用 这 种 风格 (图 4-24)。 
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由 于 卡 厂 式 设计 能 够 承载 各 种 类 型 的 内 容 ， 需 要 设计 师 精 通 从 色彩 到 图 像 应 用 等 方 方 面 
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面 知 识 。 以 下 是 最 适用 于 卡片 设计 模式 的 原则 : 

第 一 ， 了 解 阴影 及 其 特点 。 为 了 让 投影 和 渐变 的 元 素 更 加 真实 ， 了 解 阴 影 特点 在 卡片 
设计 中 显得 尤为 重要 。 如 果 阴 影 投 在 整个 卡片 的 边 和 角 上 ， 那 卡 所 载体 的 物理 交互 感 束 不 
复 存 在 了 。 第 二 ， 在 无 色 系 中 保证 UI 清晰 。 在 无 色 系 的 条 件 下 设计 ， 必 须 考虑 其 可 用 性 
和 上 所 包含 的 内 容 ， 在 此 基础 上 再 有 目的 地 添加 颜色 。 第 三 ， 有 意识 地 留 白 。 卡 上 请 留 白 的 重 
要 性 不 言 而 喻 ， 先 给 卡 厂 一 些 空间 恰当 地 增加 文本 内 容 。 为 了 让 文本 看 起 来 足够 清楚 ， 可 
以 在 文本 下 使 用 深 色 有 驼 层 ， 把 文本 放 在 一 个 框 里 或 者 把 育 景 作 模糊 处 理 。 第 四 ， 增 加 图 文 
排版 的 对 比 性 。 比 如 通过 字体 大 小 、 字 体 粗 细 来 吸引 用 户 的 注意 力 。 简 单 的 图 文 排版 其 视 
觉 效 末 是 最 好 的 ， 加 之 非 衬 线 字 体 ， 会 给 卡片 一 些 美 感 上 的 润色， 这 样 的 卡片 会 看 上 去 既 
有 获悉 感 又 主 有 创意 。 诸 如 阴影 之 类 的 元 素 ， 在 很 大 程度 上 能 帮助 用 户 联想 到 实体 卡 亡 
(图 4-25 )。 


SeQSO Vorizon 富 9:03 AM 
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设计 师 关 注 更 多 的 是 移动 卡片 设计 的 下 一 步 友 展 趋势 是 什么 ? 大 家 可 能 会 感受 到 卡片 式 
设计 越 来 越 受 欢迎 ， 这 一 趋势 并 不 会 很 快 终结 。 这 意味 着 会 有 更 多 卡 户 风格 的 应 用 和 界面 ， 
包括 使 用 更 加 丰富 的 多 层次 化 的 卡 厂 的 设计 ， 长 得 不 那么 像 卡片 的 卡 厂 ， 局 平 化 卡片 的 复 
兴 ， 重 内 容 型 网 站 大 量 使 用 卡 卢 设计 等 。 在 这 里 又 不 得 不 提 一 下 Material Design 设计 语言 。 
Material design 设计 风格 非常 鲜明 ， 市 有 浓郁 的 谷歌 式 的 严谨 和 理性 。 

Material Design 特色 的 多 层次 化 卡片 设计 以 两 种 形式 出 现 : (WD 加 入 巧妙 地 分 层 元 又 ， 
比如 阴影 元 素 ， 能 够 把 卡 厂 从 背景 中 分 离 出 来 : 包 分 层 使 得 卡片 元 素 可 堆 登 ， 这 样 用 户 可 
以 一 张 张 翻 过 去 ， 而 不 是 深 动 。 局 平 化 设计 从 未 过 时 ， 这 种 风格 的 演化 持续 影响 着 卡片 设 
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计 。 局 平 化 风格 的 卡片 将 使 用 大 量 色彩 、 流 线 型 的 文字 排版 、 精 巧 的 设计 来 帮助 用 户 浏览 
内 容 (图 4-26 )。 


Order confirmation Order confirmation 


for Yuna 


Fri, Mar 7, 8:00 PM | Reservation for 2 Fri, Mar 7, 8:00 PM | Reservation for 2 


MODIFY MODIFY 


VIEW MAP VIEW MAP 
的 Order confirmation for Yuna 人 Order confirmation 
图 4-26 


恕 结 一 下 ， 卡 片 式 设计 之 所 以 成 为 流行 趋势 ， 一 个 原因 是 因为 它 的 设计 理念 与 啊 应 式 设 
计 很 契合 。 不 仅 是 积木 块 式 的 内 容 与 大 多 数 移动 用 户 场 景 都 完美 匹配 ， 移 形 的 UI 设计 元 素 
也 是 行 之 有 效 的 。 卡 片 式 设计 的 优势 之 一 在 于 ， 它 称 得 上 是 PC 机 和 移动 设备 的 交集 ， 它 填 
补 了 互动 性 和 可 用 性 之 间 的 差距 。 正 如 曾 描述 过 的 ， 卡 片 式 设计 为 用 户 创建 了 一 个 更 为 一 致 
的 体验 ， 跨 越 了 不 同 设备 。 不 妨 想 想 人 苹果 设备 中 的 “空投 图 片 ”设计 。 当 你 有 传 入 的 数据 
时 ， 屏 幕 上 会 弹出 一 种 卡片 ， 有 两 种 选择 一 一 接 有 党 或 拒绝 。 只 需 一 个 动作 ， 残 可 以 选择 访问 
(或 拒绝 ) 此 信息 。 无 论 是 在 智能 手机 、 平 板 电 脑 或 台式 计算 机 上 ， 操 作 方 式 基 本 相同 ， 这 
意味 着 用 户 在 使 用 时 ， 更 容易 理解 。 

卡片 式 设计 特别 适用 于 啊 应 式 设计 ， 因 为 它 允 许 信 息 根据 设备 和 屏幕 尺寸 进行 调整 ， 但 
al Re 由 于 每 张 卡片 可 轻松 适应 水 平 或 垂直 布局 ， 对 于 不 同 的 设备 ， 界 面 不 

要 大 刀 阔 莽 的 调整 ， 因 为 每 个 组 件 已 经 整齐 地 组 织 在 各 自 的 “容器 ”中 了 。 在 响应 式 设 计 
A te ee 
取得 最 好 的 应 用 效果 。 这 样 不 仅 可 以 让 卡 厂 本 和 里 能 根据 屏 大 和 设备 而 调整 ， 而 且 单 独 的 卡片 
中 的 内 容 也 可 以 灵活 设计 。 因 为 每 个 卡 放 都 是 一 个 矩形 ， 在 窍 形 内 部 元 际 的 纵横 比方 面 有 很 
好 的 灵活 性 ， 即 使 将 多 个 矩形 组 合 在 一 起 也 很 方便 。 因 此 有 人 其 至 称 卡 片 式 设计 为 “移动 设 
备 的 原生 格式 ”( 图 4-27)。 

ee， 4 是 为 了 迎合 人 们 的 审美 需 - 役 而 言 ， 在 容 右 风格 的 设计 及 在 啊 应 
式 设 计 中 ， 这 是 最 灵活 的 布局 方式 ， 册 是 最 有 利于 创建 致 的 用 户 体验 的 手段 。 


124 


表面 中 的 细 闻 营造 


图 4-27 


卡 户 式 设计 背后 的 设计 理念 与 当今 互联 网 视觉 设计 的 趋势 是 非常 吻合 的 。 用 户 想 要 快速 
地 获得 信息 ， 而 卡片 式 的 呈现 方式 无 疑 是 最 能 吸引 用 户 继 续 浏览 的 一 种 手段 ， 同 时 也 起 到 归 
类 和 划分 页 面 信 息 的 功能 ， 任 何 设备 的 视 党 界面 都 可 以 使 用 这 种 视觉 表现 手法 完成 设计 。 在 
规范 性 方面 ， 卡 片 式 设计 要 注意 以 下 几 点 : 

a) 卡片 必须 有 圆 角 ， 不 过 圆 角 的 大 小 依据 不 同 的 系统 ， 其 大 小 也 有 具体 的 参数 ， 以 
Material Design 为 例 ， 其 设计 语言 就 明确 规定 其 魔法 卡片 得 圆 角 大 小 位 2dp; 

b) 卡 所 可 以 进行 多 种 操作 ， 例 如 拖 搜 、 上 点击、 位 移 等 交互 方式 ; 

c) 卡片 可 以 忽略 和 重 排 ; 

d) 卡片 可 以 用 来 归纳 众多 同类 型 信息 ， 帮 助 页 面 更 好 地 完成 信息 梳理 ， 以 便 引 导 用 户 
完成 高 效率 的 阅读 。 

虽然 说 卡片 式 布 局 在 不 同 的 系统 中 有 不 同 的 参数 ， 但 也 是 有 规律 可 循 的 ， 我 们 还 是 以 
Material Design 设计 语言 为 例 : 

具体 来 说 ， 卡 片 布局 在 原生 安 卓 系统 中 的 设计 准则 如 下 以 逻辑 像素 进行 描述 ): 

第 一 ， 字 体 设计 : 正文 : 14dp 或 16dp; 标题 : 24dp 或 更 大 ; 

第 二 ， 扁 平 按钮 : ROBOTO Medium，14dp，10dp; 

第 三 ， 屏 幕 边 界 与 卡片 间 留 白 : 8dp， 卡 片 间 留 白 : 8dp， 内 容留 白 : 16dp; 

第 四 ， 卡 片 统一 带 有 2dp 的 圆 角 (图 4-28)。 
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一 一 视觉 营造 的 风向 标 

第 五 ， 卡 上 乒 最 多 有 两 块 操 作 区 域 ， 辅 助 操 作 区 域 至 多 包含 两 个 操作 项 ， 更 多 操作 需要 使 
用 下 拉 来 单 ， 其 余部 分 都 是 主 操作 区 。 那 么 将 这 些 层次 区 分 出 来 的 方式 焉 是 通过 纸 片 边缘 的 
阴影 〈 图 4-29、4-30 )。 


一 


z-depth = 1 z-depth = 2 z-depth = 3 z-depth=4 z-depth = 5 
图 4-29 
z-depth = 1 z-depth= 2 z-depth = 3 z-depth=4 zdepth = 5 
图 4-30 
从 交互 设计 角度 来 看 ， 我 们 主要 讨论 它 的 表现 手势 ， 第 一 ， 支 持 单 张 卡 片 基 础 上 的 滑动 


手势 。 卡 片 手 势 表 现 应 该 始终 在 卡 厂 组 中 实现 ， 控 住 并 拖 动 手势 可 行 。 第 二 ， 卡 厂 集 的 往 
选 、 排 序 和 重组 。 卡 厂 集 可 以 按 要 求 排 序 或 按 日 期 文件 大 小 ， 字 和 母 表 顺序 或 控 其 他 参数 沛 
选 。 集 合 中 的 第 一 项 定位 于 集合 的 左上 角 ， 其 余 的 从 左 到 右 或 从 上 到 下 延续 。 第 三 ， 深 动 。 
卡 厂 集 只 会 竖 卫 深 动 ， 超过 最 入 卡片 噩 度 的 卡 瞩 内容 将 被 截断 且 个 可 深 动 。 J 
请 可 以 扩展 ， 这 样 卡片 高 度 就 可 以 超过 视图 的 最 大 值 ， 这 种 情况 下 ， 卡 厂 将 与 卡 厂 结 合 在 
起 深 动 。 

未 来 卡 卢 式 设计 的 发 展 趋势 ， 需 要 在 设计 语言 基础 上 寻求 更 有 趣 的 方式 ， 来 把 卡 瞩 融合 
到 应 用 中 去 。 
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表面 中 的 细 闻 营造 


4.3 表面 设计 中 的 细 区 


本 章 前 面 的 内 容 ， 回 读者 介绍 了 当前 互联 网 界面 设计 中 正在 流行 的 一 些 设计 风格 及 设计 
趋势 。 可 以 发 现 ， 现 在 主流 的 互联 网 界面 的 设计 风格 更 多 是 以 局 平 化 以 及 伪 扁 平 化 的 设计 趋 
势 为 主导 来 进行 的 延伸 和 发 展 。 

设计 师 在 追求 具有 良好 的 视觉 效果 的 界面 同时 ， 也 要 去 主动 的 平衡 效果 与 开发 成 本 及 信 
县 传递 等 诸多 元 素 。 

通 名 对 于 设计 中 的 视觉 效果 ， 设 计 师 都 要 奶 求 像素 级 别 的 完美 。 在 视觉 界面 设计 过 程 
中 ， 一 定 要 把 界面 设计 的 视觉 效果 建立 在 恨 好 的 规范 性 的 基础 上 来 完成 。 在 寻求 好 的 视觉 界 
面 设计 效果 的 同时 ， 也 要 考虑 到 与 工程 师 进 行 项 目 和 产品 对 接 时 ， 能 够 更 好 地 提升 其 工作 效 
率 。 本 节 所 讲 到 的 设计 细节 中 ， 包 括 卡片 式 设计 、 投 影 的 使 用 、 微 渐变 的 引入 以 及 色彩 的 考 
究 ， 还 包括 后 期 页 面 动 效 的 设计 ， 无 不 体现 出 对 于 界面 设计 以 及 交互 方式 逐步 轻 量化 的 核心 
要 求 。 

所 以 ， 对 于 现 有 设计 风格 ， 也 就 是 伪 遍 平 化 为 主 的 设计 趋势 来 讲 。 需 要 设计 师 能 够 从 多 
方面 入 手 ， 共 同 完 成 和 优化 现 有 的 设计 风格 ， 即 使 是 引入 了 拟 物化 效果 ， 也 要 更 加 的 含蓄 ， 
使 用 的 卡片 式 设计 效果 时 ， 虽 然 加 入 了 拟 物化 的 设计 手法 ， 但 是 其 投影 和 圆 角 的 使 用 都 是 有 
标准 可 循 的 。 

例如 ， 为 了 达到 较为 含蓄 的 拟 物 化 设计 效果 ， 在 使 用 卡片 投影 时 ， 通 第 会 将 其 投影 的 效 
果 控 制 在 距离 为 1， 大 小 为 10 左右 〈Photoshop 中 投影 面板 的 参数 )， 颜 色 为 浅 灰 的 设置 来 显 
示 ， 而 且 为 了 更 好 的 视觉 效果 ， 设 计 师 也 会 尽量 控制 卡片 圆 角 的 大 小 ， 可 以 引入 折纸 以 及 镁 
宝 效 果 等 细节 来 优化 设计 效 末 ， 如 同 男 龙 点 睛 一 般 《〈 网 4-31)。 


图 4-31 


所 以 ， 适 当 的 拟 物 细节 可 以 赋予 界面 设计 更 多 的 情感 ， 还 可 以 提升 界面 视觉 上 的 层次 
感 ， 合 理 的 规划 页 面 信息 的 推送 层级 ， 让 界面 的 视觉 设 计 真 正 做 到 关 观 、 轻 量 和 好 用 。 在 细 
记 的 把 控 和 设计 上 ， 和 需要 设计 师 通 过 大 量 的 实践 以 及 对 优秀 作品 的 收集 与 研究 ， 总 结 出 设计 
界面 的 过 程 中 ， 快 速 设 计 出 好 的 视觉 效果 所 需要 的 条 件 与 方法 ， 包 丘 文字 、 图 片 、 框 以 等 众 
多 设计 元 系 。 

对 于 一 名 视觉 设计 师 来 讲 ， 从 业 时 间 的 长 短 固然 重要 。 但 时 间 不 是 绝对 的 衡量 标准 ， 设 
计 师 能 舍 在 平时 工作 中 发 现 和 总 结 好 的 设计 方法 ， 才 是 真正 的 提升 之 道 和 生存 之 本 。 
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移动 端 产品 的 可 用 性 原则 

本 章 将 就 移动 端 产品 的 可 用 性 原则 为 读者 提供 一 些 经 验 和 指导 。 当 设计 师 在 设计 一 球 产 
品 的 交互 流程 和 视觉 效果 的 时 候 ， 往 往 都 会 根据 产品 所 针对 的 终端 设备 的 特点 进行 设计 工作 。 
设计 一 款 产品 时 ， 用 户 和 功能 一 定 是 核心 ， 但 是 ， 产 品 最 终 的 落地 和 实 操 都 是 要 通过 各 种 终 
端 来 展现 的 ， 也 就 是 说 ， 用 户 与 产品 产生 交互 关系 是 通过 终端 屏幕 来 完成 的 。 

所 以 ， 设 备 的 不 同 ， 用 户 操作 产品 的 环境 、 信 息 推 送 、 使 用 频率 、 点 击 方式 、 使 用 时 间 
以 及 交互 方式 都 会 有 所 不 同 。 例 如 ， 简 单 地 对 比 一 下 以 PC 端 与 手机 移动 端 之 间 的 区 别 ， 可 
以 发 现 其 最 大 的 差异 就 在 于 屏幕 间 。 

使 用 电脑 的 环境 主要 是 室内 环境 ， 通 常 网 络 环境 较 好 ， 也 较为 稳定 ， 所 以 用 户 在 使 用 电 
脑 上 网 的 时 候 ， 使 用 的 时 间 大 多 比较 长 ， 通 常 以 小 时 来 进行 计算 。 那 么 ， 对 于 网 页 这 种 互联 
网 信息 的 传播 形式 来 说 ， 其 信息 量 就 会 显得 更 加 丰富 和 庞大 ， 例 如 门户 网 站 和 上 网 导航 就 是 
一 种 非常 典型 的 信息 的 传播 形式 ， 因 为 判断 出 用 户 将 有 大 量 的 时 间 算 选 信 息 ， 所 以 这 种 信息 
集群 类 型 的 传播 形式 也 就 成 为 了 网 页 界面 中 的 一 大 特点 。 

但 是 ， 这 种 大 信息 量 的 传播 形式 显然 不 适合 移动 端 。 因 为 移动 端的 设备 屏幕 较 小 ， 可 携带 
型 很 强 。 以 智能 手机 为 例 ， 其 屏幕 基本 上 在 4.0 一 5.5 英寸 之 间 ， 并 且 崇 尚 单 手 操作 以 解放 用 户 
的 另 一 只 手 。 所 以 ， 在 使 用 智能 设备 中 的 应 用 和 产品 时 ， 时 间 的 碎片 化 会 非常 明显 ， 室 内 或 者 
室外 ，WiFi 状态 或 者 移动 流量 状态 都 有 可 能 ， 甚 至 在 地 铁 和 电梯 中 使 用 的 可 能 性 也 会 很 大 。 

所 以 ， 对 于 手机 APP 来 说 ， 需 要 更 加 提倡 效率 型 的 使 用 方法 ， 用 户 一 般 在 使 用 智能 设 
备 时 都 是 以 分 甚至 是 秒 为 单位 时 间 计 时 的 。 一 定 要 尽 可 能 在 完成 用 户 需 求 的 基础 上 减少 用 户 
的 操作 成 本 和 使 用 时 间 ， 减 少 页 面 的 跳 转 ， 减 少 用 户 的 学 习 成 本 ， 这 是 手机 APP 的 交互 核 
心 。 所 以 ， 当 人 机 交互 是 以 用 户 和 移动 智能 设备 为 主导 的 时 候 ， 其 交互 方式 就 要 比 电脑 更 加 
的 多 元 化 了 ， 除 了 点 击 ， 还 包 插 语音、 肢体 语言 以 及 指纹 、 声 纹 和 虹膜 等 识别 方式 ， 这 都 是 
为 了 市 省 用 户 的 操作 成 本 ， 更 加 适应 不 同 的 交互 场景 。 

手机 应 用 的 信息 推送 ， 更 多 遵循 移动 互联 “个 性 化 ”的 特点 ， 因 为 用 户 没 有 大 量 的 时 间 
筛选 信息 ， 尤 其 是 在 一 些 比较 嘲 杂 的 使 用 场景 中 更 是 如 此 。 所 以 ， 这 个 时 候 需 要 产品 帮助 用 
户 来 做 出 选择 ， 比 如 “Boss 直 聘 ”以 及 “Apple Music” 都 是 根据 用 户 的 需求 来 进行 信息 的 
第 选 之 后 完成 定 人 定量 的 推送 。 也 就 是 说 ， 它 们 可 以 根据 不 同 用 户 的 需求 来 推荐 不 同 的 信 
四 ， 这 样 可 以 节省 用 户 筛选 信息 所 花费 的 时 间 ， 让 用 户 深 刻 地 感觉 自己 被 尊重 和 重视 。 比 如 
说 “ 脉 脉 ”在 改版 之 后 会 对 于 每 一 个 不 同 的 用 户 定制 一 球 属于 该 用 户 的 “头条 ”这 可 以 增 
加 用 户 的 查阅 量 以 及 留存 度 。“ 个 性 化 ”的 信息 推荐 可 以 说 是 提升 用 户 体 验方 式 上 的 重大 草 
新 ， 也 成 为 了 移动 端 应 用 产品 在 信息 推送 上 的 一 大 特点 ， 而 且 现 在 已 逐步 影响 到 PC 端 。 


前 文 介绍 过 智能 手机 界面 的 一 些 特点 ， 在 此 全 面 总 结 一 下 。 使 用 智能 手机 的 时 候 通 常 是 


以 竖 屏 显示 且 大 多 是 以 蛙 手 进行 操作 。 那 么 对 于 乔 能 手机 屏 大 来 说 ， 通 第 以 屏 禹 上 半 部 分 为 

腿 部 热 区 ， 下 半 和 面部 分 为 手 部 操作 热 区 。 所 以 ， 通 第 会 把 展示 类 型 的 信息 放 在 上 半 部 分 的 眼 
部 热 区 ， 而 一 些 重要 的 操作 和 操 击 按钮 会 放 在 手机 的 中 下 部 分 ， 以 方便 用 户 的 操作 。 

例如 ， 在 有 些 APP 中 ， 将 返回 到 上 一 级 的 返回 键 以 及 部 分 重要 操作 功能 键 放 在 屏幕 下 

方 来 展示 ， 一 些 手 机 移动 产品 的 登录 页 面 的 输入 框 和 按钮 也 会 放置 在 屏 硕 中 线 以 下 来 展示 。 
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一 一 视觉 营造 的 风向 标 

设计 师 要 能 够 在 手机 屏幕 大 小 ， 信 息 合 理 完 整 的 传递 ， 用 户 阅 读 与 接受 习惯 ， 界 面 视 沉 
效果 的 美观 以 及 功能 区 域 操作 和 舒适 性 之 则 寻求 平衡 。 

力争 使 用 户 记忆 有 负担 尽量 减少 ， 且 章 重 用 户 操 作 习 惯 。 

在 使 用 移动 端 设 备 时 ， 要 求 尽量 减少 用 户 的 操作 时 间 成 本 ， 并 增加 产品 的 易学 程度 ， 还 
能 够 重重 用 户 所 形成 的 操作 习惯 ， 能 够 保证 快速 ， 智 能 ， 高 效 地 完成 用 户 需求 。 

在 设计 平台 应 用 的 时 候 ， 不 要 混用 不 同 平台 的 视 沉 元素 。 还 要 注意 版 本 更 新 过 程 中 视觉 
风格 的 延续 ， 重 要 功能 操作 图 标 也 要 保持 其 一 致 性 ， 要 保留 产品 核心 功能 ， 莉 循 用 户 之 前 的 
操作 习惯 。 

由 于 屏 笑 较 小 ， 所 以 对 于 手机 应 用 中 的 信息 展示 ， 通 党 以 新 的 单 页 面 展示 为 主 。 例 如 ， 
从 列表 页 跳 转 到 详情 页 就 是 一 个 很 典型 的 例子 。 社 区 平台 中 从 好 友 列 表 聊 天 页 进入 到 详情 页 
的 时 候 ， 由 于 手机 屏 颇 较 小 及 竖 屏 使 用 的 原因 ， 这 两 个 功能 页 通常 会 分 别 在 两 张 页 面 展 示 ， 
如 果 将 这 两 层 信 息 放 在 一 个 屏 磋 中 显示 叉 势 必 会 己 庆 住 更 多 的 有 效 信息 ， 所 以 把 这 种 方式 称 
为 页 面 刷 新 。 


那么 以 上 就 是 对 以 智能 手机 为 代表 的 移动 界面 特点 的 上 总结。 那么 ， 对 于 手机 APP 来 
说 ， 除 了 要 从 终端 特点 出 发 并 延展 之 外 ， 也 要 注音 遵循 其 自身 的 特点 ， 并 且 使 所 设计 的 产品 


如 何 变 得 更 加 易 用 。 对 于 一 球 产 品 来 讲 ， 其 可 用 性 和 吻 用 性 无 疑 是 提升 用 户 体 验 非 常 重 要 的 
部 分 ， 设 计 师 设计 的 产品 不 光 要 考虑 其 视觉 效果 ， 更 重要 的 是 在 产品 的 使 用 和 操作 流程 中 考 
虑 用 户 心 情 和 体验 。 例 如 ， 产 品 传递 信息 是 否 全 面 ， 提 示 页 和 卡片 是 否 能 够 适时 出 现 ， 如 何 
去 编辑 提示 卡片 中 的 提示 语言 等 部 是 需要 考虑 到 的 细 市 。 所 以 ， 产 品 的 “可 用 性 ”是 衡量 其 
用 户 体 验 非常 重要 的 标杆 。 产 品 的 可 用 性 大 多 指 的 古 产 品 以 及 系统 的 质量 指标 和 吻 用 指标 ， 
是 产品 对 用 户 来 说 有 效 、 易 学 、 高 效 、 好 记 、 错 误 少 和 令 人 满意 的 程度 。 

那么 ， 对 于 手机 APP 的 可 用 性 原则 有 没有 一 些 标准 可 以 遵循 呢 ? 下 面 逐 一 介绍 移动 产 
品 中 的 可 用 性 原则 。 


5.2.{ 准确 性 与 便捷 性 


上 文 提 到 ， 移 动 咒 设备 在 使 用 时 最 明显 的 特 氮 是 其 使 用 时 间 的 碎片 化 以 及 用 户 在 使 用 该 
产品 时 可 能 会 有 很 多 不 同 的 使 用 场景 。 所 以 如 何 你 证 用 户 在 不 同 的 使 用 场景 中 能 够 准确 地 操作 
界面 并 且 能 够 得 到 正确 的 操作 反馈 以 解决 用 户 的 问题 ， 是 每 一 位 设计 师 需 要 考虑 到 的 问题 。 

手机 的 使 用 频率 可 以 说 是 相当 高 的 ， 因 为 手机 本 吴 误 是 一 种 效率 型 设备 ， 尤 其 是 在 一 些 
复杂 环境 中 ， 手 机 使 用 的 频率 很 高 ， 而 每 次 使 用 的 时 间 则 相对 较 短 。 

对 于 手机 使 用 环境 来 说 ， 可 大 致 分 为 室内 和 室外 两 种 情况 。 室 内 环境 较为 稳定 ， 网 络 环 
境 也 更 多 以 WiFi 为 主 ， 用 户 能 够 集中 注意 力 并 准确 操作 产品 。 这 种 情况 一 般 出 现在 用 户 休 
恩 时 和 下 班 以 后 ， 所 使 用 的 产品 大 多 沉浸 感 很 中 ， 以 游戏 和 视频 为 代表 ， 并 且 通 第 会 依赖 稳 
定 的 ， 民 好 的 网 络 环境 才能 够 正常 使 用 ， 用 户 在 沉浸 过 程 中 非 钊 反感 被 频 楷 打 断 。 室 外 环境 
不 确定 因 妹 较 多 ， 网 络 环境 不 稳定 ， 所 以 当 网 络 较 关 时 要 及 时 出 现 加 载 状 态 的 提示 ， 或 应 用 
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极速 版 本 的 切换 来 保证 用 户 使 用 体验 的 流畅 性 。 所 以 ， 在 室外 使 用 产品 时 一 般 应 避免 沉浸 民 

较 强 的 功能 ， 并 且 界面 中 大 多 应 以 图 片 、 文 字 为 主 ， 很 少 会 出 现 视频 等 大 量 花费 流量 的 功 

能 。 在 这 种 情况 之 下 ， 设 计 师 需要 让 产品 高 效 解决 用 户 的 需求 ， 如 果 由 于 特殊 情况 用 户 的 操 
作 被 迫 中 断 ， 产 品 也 要 做 出 及 时 的 反馈 以 便于 将 用 户 的 焦虑 情绪 降 至 最 低 。 

对 于 准确 性 与 便捷 性 的 理解 ， 可 以 分 为 以 下 几 点 。 最 为 浅显 的 理解 便 是 产品 在 进行 人 机 
交互 时 需要 给 予 用 户 正确 的 引导 ， 在 不 同 的 状态 下 ， 产 品 控件 的 交互 样式 也 应 该 有 所 不 同 。 
也 就 是 说 ， 在 进行 产品 设计 时 ， 设 计 师 要 对 图 标 、 按 钮 以 及 各 个 控件 ， 针 对 不 同 场景 和 
使 用 情况 进行 一 些 处 理 ， 同 时 点 击 后 要 进行 正确 的 跳 转 ， 以 便于 用 户 能 够 被 引导 进入 正 
确 的 页 面 进行 操作 。 这 是 产品 可 用 原则 中 最 基本 的 组 成 部 分 ， 同 时 也 是 最 重要 的 。 所 以 ， 移 
动产 品 的 按钮 和 控件 在 交互 的 过 程 中 通常 会 存在 以 下 几 种 状态 (图 5-1)， 分 别 是 : 

a) 按钮 点 击 前 的 状态 默认 状态 ); 

b) 按钮 点 击 时 的 状态 触摸 状态 ); 

c) 按钮 不 可 点 击 的 状态 。 


例如 ， 在 支付 流程 中 使 用 银行 卡 支付 时 ， 通 常会 进 
行 银 行 卡 的 筛选 ， 那 么 这 个 时 候 ， 例 如 所 选择 银行 卡 的 
余额 多 于 支付 所 需 金额 ， 那 么 其 下 方 就 会 的 出 现 “选择 
并 支付 ”的 字样 并 且 按 钮 也 会 具备 色相 甚至 是 少量 投影 
的 悬浮 效果 来 引导 用 户 点 击 。 
反之 ， 如 果 选 择 银行 卡 的 余额 少 于 支付 所 需 金额 ， 
那么 下 方 的 按钮 则 会 变 成 灰色 ， 用 户 也 就 无 法 进行 点 击 
和 操作 了 (图 5-2)。 | 
那么 ， 这 就 是 对 于 产品 准确 性 与 便捷 性 的 重要 体现 olbo 
之 一 ， 例 如 所 设计 产品 的 控件 并 没有 根据 不 同 的 情况 调 i 
取 不 同 的 交互 样式 的 话 ， 那 么 ， 用 户 在 进行 操作 的 过 程 us © 
中 就 会 大 量 出 现 误 操作 ， 会 给 予 用 户 很 多 的 不 良 引导 ， 
甚至 对 于 产品 产生 毁灭 性 的 打击 。 所 以 出 于 此 可 用 性 原 ” 和 5k。 6219 2789 2810 4436580 
则 的 要 求 ， 设计 师 在 设计 一 球 产 品 时 一 定 要 多 方面 考 * 身份 验证 。 “140 109 18992632 2589 
虑 ， 对 于 控件 要 考虑 到 可 点 击 与 不 可 点 击 的 两 种 状态 和 ,www 
所 对 应 的 交互 样式 才 可 以 。 
其 次 ， 对 于 手机 可 用 性 原则 中 的 “准确 性 与 便捷 
性 ”， 还 有 一 个 层面 可 以 理解 ， 那 就 是 减少 页 面 的 跳 转 
和 用 户 的 时 间 成 本 。 众 所 周知 的 一 个 道理 是 ， 手 机 是 以 加 5-2 
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一 一 视觉 营造 的 风向 标 

单 页 面 呈 现 的 “页 面 刷新 ”的 方式 为 主 来 展示 的 ， 这 是 由 于 其 屏幕 较 小 ， 所 以 要 有 一 些 方法 
减少 当前 产品 的 页 面 跳 转 ， 让 用 户 在 碎片 化 的 时 间 和 环境 之 下 也 可 以 提高 用 户 的 效率 ， 为 了 
体现 这 样 的 便捷 性 ， 可 以 提出 以 下 解决 方法 来 优化 产品 ， 提 高 其 可 用 性 ， 其 内 容 包括 : 在 传 
统 的 人 机 交互 方式 上 加 入 更 节省 时 间 的 交互 方式 ， 例 如 语音 、 动 作 捕 捉 、 指 纹 识 别 、 脸 部 识 
别 以 及 眼 动 识别 等 效果 来 优化 。 

一 般 ， 在 iOS 系统 中 进行 第 三 方 应 用 的 设计 ， 在 文 付 时 验证 个 人 号 份 的 时 候 总 是 将 指纹 
识别 放 在 最 优先 的 位 置 ， 因 为 这 种 验证 方式 是 最 安全 也 是 最 快速 的 。 而 且 ， 指 纹 识别 也 古 芋 
果 手 机 所 提供 的 最 重要 的 功能 接口 之 一 ， 假 如 指纹 识别 出 现 问题 ， 才 会 调 取 其 他 的 支付 方式 
来 进行 辅助 〈 图 5-3)。 
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另外 ， 对 于 “准确 性 与 便捷 性 ”的 理解 ， 还 可 以 通过 信息 传递 的 方式 来 诠释 。 对 于 私有 
化 现象 明显 的 智能 手机 来 说 ,信息 传 递 的 准确 与 快速 是 产品 的 真正 核心 需求 。 那 么 ， 产 品 如 
果 可 以 为 用 户 进 行 信息 的 过 小 和 人 沪 选 就 显得 非常 人 性 化 了 ， 试 想 一 下 ， 如 下 用 户 所 看 到 的 信 
恩 已 经 是 通过 筛选 过 之 后 的 结 采 ， 那 么 用 户 在 阅读 时 就 会 更 加 便捷 和 快速 。 

移动 互联 的 特性 之 一 就 是 “个 性 化 定制 ”， 通 过 用 户 使 用 产品 的 记录 和 产品 对 用 户 需 求 
的 调研 ， 可 以 为 各 种 不 同 的 用 户 推 送 不 同 的 消 轧 ， 实 现 信息 分 配 上 的 “ 因 人 而 卉 ”。 所 以 ， 
语 恩 个 性 化 定制 和 推送 必然 是 未 来 产品 在 有 用户 体验 上 友 展 的 必然 趋势 。 

忆 结 一 下 “准确 性 与 便捷 性 ”的 可 用 性 原则 。 第 一 点 : 对 于 产品 的 视 沉 控件 要 根据 不 同 
的 情景 设计 和 调 取 不 同 的 交互 情景 与 之 匹配 。 第 二 点 : 当 用 户 对 产品 信息 的 理解 不 到 位 时 ， 
会 造成 用 户 试 错 成 本 的 增加 ， 所 以 产品 可 为 用 户 提 供 答 试 的 可 能 性 ， 帮 用 户 选择 更 匹配 的 产 
品 和 更 准确 的 信息 。 例 如 ， 淘 宇 试 妆 台 以 及 淘宝 直播 的 功能 植 入 ， 可 以 增加 用 户 与 信息 源 的 
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同步 接触 。 第 三 点 :“ 个 性 化 ”的 互联 网 信息 推荐 形式 也 会 更 加 准确 地 为 用 户 匹 配 信息 ， 提 
ie 


5.2.2 一 致 性 原则 


对 于 一 致 性 原则 的 理解 ， 主 要 可 以 分 两 个 部 分 。 

1. 视觉 一 致 性 

a) 对 于 一 球 产 品 进行 视觉 设计 的 时 候 ， 一 定 要 按照 控件 的 功能 进行 区 分 ， 以 保证 界面 
风格 的 一 致 以 及 控件 效果 与 形态 的 一 致 。 

b) 对 于 一 区 产品 ， 其 视 沉 效 末 主要 是 根据 产品 所 服务 的 人 群 以 及 产品 的 行业 特点 来 确 
定 的 ， 所 以 其 用 色 、 控 件 的 形状 等 视觉 元 素 痢 是 有 很 多 可 以 深入 和 考 完 的 地 方 。 例 如 ， 妆 设 
计 师 准备 针对 一 球 健 喘 运动 类 产品 进行 视觉 设 计 的 时 候 ， 那 么 其 视觉 风格 一 定 古 以 干练 、 力 
量 以 及 清 旨 等 关键 词 来 进行 设计 《图 5-4)。 
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一 一 视觉 营造 的 风向 标 

所 以 ， 为 了 保证 产品 控件 的 视 党 一 致 性 ， 当 产品 设计 完成 之 后 会 专门 针对 此 产品 编写 其 
视觉 “规范 性 说 明文 档 ” 以 便 与 工程 师 顺 利 地 进行 对 接 。 还 有 一 个 作用 便 是 ， 当 产品 因 版 
本 升级 进行 新 页 面 的 设计 时 也 能 够 保证 其 视觉 效果 的 一 致 ， 从 视觉 上 迎合 用 户 的 使 用 习惯 。 
在 其 中 ， 也 会 对 产品 中 第 用 到 的 一 些 公 共 控 件 、 标 准 色 以 及 标准 文字 的 组 合 以 及 使 用 规范 进 
行 重 点 标注 和 归 类 。“ 规 范 性 说 明文 档 ” 的 编写 在 后 文 会 详细 介绍 。 

2. 操作 方式 的 一 致 性 

操作 方式 的 一 致 性 也 是 产品 “一 致 性 ”原则 中 非常 重要 的 组 成 部 分 ， 例 如 信息 在 推送 的 
过 程 中 ， 采 用 什么 动 效 来 展示 ， 以 及 当 用 户 点 击 列表 或 者 按钮 的 时 候 ， 得 到 的 反馈 也 应 该 有 
所 不 同 ， 并 且 根 据点 击 不 同 的 功能 控件 选择 与 之 相 匹配 的 动 效 来 展示 。iOS 以 及 Material 
Design 设计 语言 都 对 此 做 出 了 明确 的 规定 。 

再 来 举 一 个 例子 ， 大 家 所 熟悉 的 “ 侧 滑 式 ” 布 局 ， 按 照 用 户 的 操作 习惯 ， 通 音 都 会 
把 侧 清 的 弹出 方 回 默认 为 从 左 往 右 ， 并 且 触 发 侧 滑 式 布 局 的 图 标 也 应 该 和 侧 清 的 位 置 保 
持 一 致 。 那 么 ， 如 有 果 在 其 余 二 级 页 面 也 存在 侧 滑 式 布局 的 话 ， 最 好 也 将 其 侧 滑 弹出 的 方 
同和 动 效 与 当前 页 面 保持 一 臻 ， 用 户 在 进行 交互 的 过 程 中 束 会 感觉 更 加 的 统一 ， 用 户 体 
验 也 会 更 加 良好 。 


5.2.3 ”可 过 性 原则 


从 字面 意思 上 来 理解 的 话 ， 可 敢 性 原则 就 是 “从 哪儿 来 回 哪儿 去 ” 也 就 是 说 ， 在 产品 的 二 
级 页 面 中 一 定 要 加 入 能 够 返回 上 一 级 的 “返回 ”控件 ， 确 保 用 户 在 产品 交互 过 程 中 的 完整 性 
(图 5-5)。 


eeeeo Carrier CI ) 


图 5-5 


事实 上， 移动 产品 “可 逆 性 原则 ”不 仅仅 是 返回 键 的 加 入 这 么 简单 ， 从 更 次 层次 上 来 看 
的 话 ,， “可 逆 性 原则 ”所 体现 出 来 的 是 对 于 用 户 在 操作 产品 出 现 问 题 或 者 操作 后 没有 达到 预 
想 的 结 末 ， 此 时 ， 产 品 该 提供 什么 样 的 解决 方案 来 避免 和 降低 用 户 的 焦虑 感 。 用 户 在 使 用 产 
品 的 过 程 中 只 要 出 现 想 返回 的 想法 ， 那 么 一 定 是 有 以 下 两 点 原因 : 

a) 操作 完成 ; 

b) 操作 失败 或 者 信息 推送 结果 与 用 户 需 求 不 匹配 。 

当 出 现 第 二 种 情况 时 ， 产 品 驶 只 能 靠 “ 返 回 上 一 步 ” 解 决 问题 了 。 在 产品 交互 设计 过 程 
中 ， 有 一 个 工作 环节 叫做 “用 六 虚拟 泊 程 分 机 ”， 设 计 师 会 陨 用 户 在 操作 产品 交互 流程 时 的 
各 种 情况 进行 标注 ， 例 如 ， 用 户 在 当前 页 面 操作 成 功 时 ， 会 进入 到 哪个 页 面 ， 当 用 户 操 作 未 
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成 功 或 者 操作 的 结果 并 没有 达到 用 户 的 预期 时 ， 用 户 会 留 在 当前 页 面 还 下 是 进行 页 面 的 跳 转 
图 5-6 所 示 便 是 “用 户 虚 拟 流程 分 析 图 ”的 例子 (图 5-6)。 
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契合 看 数码 产品 
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图 5-6 


例如 ， 当 用 户 在 搜索 页 面 没有 搜 到 想 要 的 结果 时 ， 产 品 不 要 只 是 提供 返回 键 让 用 户 返 回 
到 上 一 级 页 面 或 者 重新 搜索 ， 这 样 的 话 会 增加 用 户 的 时 间 成 本 ， 也 会 使 得 用 户 的 情绪 变 得 更 加 
焦 夸 ， 甚 全 产生 对 于 当前 产品 的 不 信任 感 。 所 以 ， 这 个 时 候 需要 给 用 户 提供 多 种 解决 问题 的 路 
径 。 例 如 ， 需 要 分 析 用 户 在 输入 关键 词 的 时 候 是 个 输 入 正确 ， 并 且 给 予 用 户 可 能 正确 的 一 些 相 
天 关键 词 或 和 用 户 输入 的 搜索 词 相关 的 信息 作为 备 选 。 如 图 5-7 所 示 ， 加 入 “为 您 推荐 ” 功 
能 ， 这 根据 用 户 输 入 的 搜索 关键 词 进行 相关 产品 和 信息 的 推荐 ， 以 便于 减少 用 户 的 焦虑 感 ， 并 
且 能 够 在 解决 问题 的 同时 不 用 进行 页 面 跳 转 。 
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eeeee DEMO 全 4:20 AM 了 Wm 
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那么 ， 设 计 师 在 设计 一 球 产 品 可 逆 性 的 时 候 ， 一 定 要 充分 考虑 到 当 用 户 操 作 失 败 的 时 
候 ， 产 品 如 何 进行 处 理 ? 假如 这 一 个 部 分 没有 加 以 充分 的 考虑 ， 那 么 产品 注定 是 无 法 满足 用 
户 的 需求 的 。 

所 以 ,“ 可 逆 性 原则 ”对 于 产品 来 说 ， 是 决定 产品 是 任 易 用 与 可 用 的 决定 性 因素 ， 也 古 
能 否 在 人 机 交互 过 程 中 为 产品 与 用 户 快速 建立 信任 感 的 “关键 性 纽带 ” 毕竟 设计 产品 的 根 
本 目的 还 是 为 了 解决 问题 。 


5.2.4 容错 性 原则 


当前 产品 的 容错 性 已 经 越 来 越 被 重视 ， 作 为 评判 产品 用 户 体验 的 标准 ， 操 作 和 错误 对 用 户 
体验 的 影响 无 疑 是 灾难 性 的 。 本 市 残 产 品 的 “容错 性 原则 ”进行 阐述 。 

其 实 “ 容 错 性 ”是 可 用 性 的 一 个 非常 重要 的 细 分 模块 ， 主 要 功能 是 当 用 户 进 行 章 要 操 
作 或 操作 错误 的 时 候 给 予 用 户 必要 的 提示 ， 以 免 用 户 出 现 重 大 的 操作 失误 而 造成 不 必要 的 
损失 。 
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这 种 原则 在 PC 端 为 代表 的 传统 互联 网 时 代 就 已 经 广泛 应 用 了 ， 例 如 当 用 户 在 使 用 

Windows 系统 时 ， 如 果 用 户 想 要 执行 “彻底 删除 文件 ”的 命令 ， 文 件 在 被 删除 前 会 出 现 一 个 

关于 是 否 彻 底 删除 的 提示 ， 以 便 给 用 户 一 个 缓冲 。 这 虽然 是 交互 设计 中 一 个 非常 微妙 的 细 
节 ， 但 其 作用 非常 重要 ， 可 以 有 效 地 避免 用 户 误 删除 重要 文件 (如 图 5-8)。 


~ 确实 圈 永 久 性 地 删除 此 交 件 夹 吗 ? 


类型 : WInRAR ZIP 压 簿 交 件 
oh: 12.5 MB 


修改 日 期 : 2016/12/15 16:19 
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我 们 根据 唐纳德 。 详 曼 的 《设计 心理 学 》 中 关于 错误 的 分 类 及 错误 设计 原则 ， 尼 和 尔 森 的 
《可 用 性 工程 》 中 错误 信息 四 原则 以 及 《十 大 可 用 性 原则 》 中 第 七 条 和 第 九条 中 提 到 的 关于 
防 错 原 则 和 容错 原则 的 内 容 ， 为 “容错 性 ”下 一 个 定义 : 

容错 性 是 产品 对 错误 操作 的 承载 性 能 ， 即 一 个 产品 操作 时 出 现 错误 的 概 雍和 错误 出 现 后 
得 到 解决 的 概率 和 效率 。 容 错 性 最 初 应 用 于 计算 机 领域 ， 它 的 存在 能 保证 系统 在 故障 存在 的 
情况 下 不 会 失效 ， 仍 然 正 常 工作 。 产 品 容错 性 设计 能 使 产品 与 用 户 的 交流 或 人 与 人 借助 产品 
的 交流 更 加 流畅 。 由 此 可 见 ， 容 错 性 设计 原则 是 非常 重要 的 ， 并 且 是 不 可 缺失 的 。 因 为 ， 再 
优秀 的 产品 也 不 敢 保 证 用 户 在 操作 过 程 中 不 会 出 错 ， 所 以 ， 容 错 性 原则 一 定 是 设计 师 需 要 重 
点 考虑 的 内 容 。 容 错 性 设计 原则 主要 可 以 忌 结 为 以 下 几 个 方面 。 

1， 引 导 和 提示 

当 一 款 产 品 上 线 之 后 会 吸引 很 多 用 户 下载 和 使 用 。 在 这 些 用 户 中 ， 初 级 用 户 占据 了 相当 
一 部 分 ， 那 么 如 何 使 这 些 初级 用 户 能 够 快速 的 上 手 和 使 用 ， 产 品 的 引导 与 提示 就 显得 非常 重 
要 了 。 例 如 当初 级 用 户 初 次 使 用 这 区 产品 进 到 一 些 核心 界面 时 ， 会 出 现 页 面 变 黑 ， 提 供 详尽 
的 说 明文 字 和 使 用 指导 《如 网 5-9)。 


玖 5-9 


137 


移动 界面 设计 


一 一 视 沉 营造 的 风向 标 

为 什么 需要 这 样 的 交互 方式 呢 ? 因为 普通 用 户 和 专家 用 户 可 能 已 经 熟练 使 过 产品 很 多 
次 ， 对 流程 有 了 较为 深入 的 认识 。 而 对 于 新 手 用 户 来 资 ， 初 次 使 用 过 程 融 是 一 个 学 习 和 风 悉 
的 过 程 ， 这 时 候 正 确 地 引导 和 提示 会 显 震 减少 用 户 的 操作 及 学 习 的 成 本 。 此 外 ， 针 对 用 户 搜 
索 无 结果 或 者 搜索 结 末 不 匹配 的 情况 ， 产 品 会 乔 能 地 根据 用 户 的 出 错 原因 给 予 引 导 或 者 推 存 
相关 的 内 容 和 关键 性 文字 给 用 户 。 

2. 限制 操作 提示 万 案 

如 何 从 设计 上 避免 用 户 出 错 ， 限 制 操作 或 者 限制 提示 在 产品 交互 过 程 中 是 一 种 非常 必要 
的 方式 。 设 计 师 为 了 避免 错误 的 发 生 痢 会 设置 一 些 障碍 或 所 出 一 些 限制 性 要 求 ， 以 便 减少 用 
户 在 操作 产品 时 出 现 重 大 的 失误 ， 具 体 表现 方式 如 下 : 

(1) 增加 一 些 无 法 换 回 操作 的 难 肛 ， 以 免 用 尸 出现 误 操 作 

在 产品 设计 当中 ， 主 要 是 通过 对 一 些 可 能 造成 错误 的 操作 入 口 设置 障碍 或 直接 禁止 操 
作 ， 以 避免 出 现 重 大 错误 。 其 实 这 种 做 法 是 非常 常见 的 ， 比 如 在 使 用 苹果 手机 时 ， 在 时 面 删 
除 和 番 载 应 用 时 ， 为 了 避免 用 户 出 现 炙 载 关 似 于 “短信 息 ”“ 照 厂 ” 等 原生 应 用 的 情况 ， 在 
到 载 界面 时 瓯 不 显示 到 载 的 按钮 ， 这 样 融 可 以 有 效 地 避免 出 现 上 述 的 情况 。 

(2) 在 不 适合 操作 的 环境 中 适当 限制 用 户 的 东 些 交互 操作 

这 个 概念 的 本 质 就 是 根据 产品 不 同 的 情况 来 调 取 和 显示 不 同 的 交互 样式 来 给 予 用 户 进行 
提示 。 设 计 师 会 通 尝 直接 把 不 能 操作 的 部 分 设计 成 为 灰色 的 区 域 以 提示 用 户 当 前 功能 不 可 操 
作 。 例 如 ， 当 用 户 在 执行 移动 器 登录 功能 时 ， 在 登录 页 面 中 ， 只 有 用 户 正 确 填写 了 用 户 名 称 和 
密码 的 情况 之 下 ， 确 认 登 录 的 按钮 才 会 变 成 可 扣 击 的 效果 ， 假 如 其 中 的 任何 一 个 信息 发 生 错 
误 ， 那 么 登录 按钮 就 会 显示 成 灰色 ， 以 所 示 用 户 不 可 操作 该 功能 (如 图 5-10)。 


sa 当前 姓 户 趟 存在 


Iz1880 晤 176.c0m 


I Label Send I Label Send 
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(3) 反馈 和 帮助 的 提示 卡片 

a) 当 用 户 有 些 错误 发 生 时 ， 及 时 反馈 错误 并 提供 纠 错 帮助 。 

b) 在 提示 卡片 中 需要 包括 以 下 内 容 : 

@ 错误 提示 图 标 ; 

@ 错误 以 及 提示 原因 ; 

@ 解雇 方案 ， 并 且 要 通过 视觉 符号 的 塑造 来 引导 用 户 进行 操作 。 

例如 ， 当 用 户 在 非 WiFi 的 状态 下 观看 视频 时 ， 为 了 避免 用 户 耗 费 不 必要 的 流量 ， 这 时 
融会 出 现 相关 的 提示 卡片 〈 如 网 5-11)。 


图 5-11 


在 该 卡片 提示 的 过 程 中 ， 产 品 会 建议 用 户 市 省 流量 ， 所 以 在 所 提供 的 解决 方案 中 ， 会 将 


“我 要 流量 ”的 视觉 效果 做 得 更 加 明显 ， 以 便 引 导 用 户 扣 击 。 实 践 证 明 ， 用 户 会 下 意识 的 所 
击 更 为 明显 的 控件 ， 所 以 ， 需 要 设计 师 在 控件 选择 上 给 予 用 户 一 些 选择 和 提示 。 但 是 如 果 操 
作 的 错误 还 是 不 可 避免 的 友 生 了 ， 那 么 在 这 时 候 进 行 合理 恰当 的 提示 可 以 尽 可 能 地 减少 用 户 
的 挫败 感 。 

还 是 以 搜索 功能 为 例 ， 当 用 户 使 用 产品 进行 搜索 但 并 没有 搜 到 用 户 想 要 的 结果 时 ， 束 和 需 
要 产品 及 时 的 分 析 用 户 没有 找到 相关 信息 可 能 出 现 的 原因 是 什么 ， 并 且 进 行 一 些 必 要 的 相关 
言 轧 的 推荐 。 在 提示 的 时 候 要 简洁 明了 ， 并 且 表 现 出 适当 的 菊 意 以 减少 用 户 内 心 的 焦虑 感 ， 
甚至 可 以 二 接 提 供 “在 线 咨询 ”等 功能 来 进行 弥补 。 图 5-12 所 示 的 是 一 些 搜索 失败 的 提示 
设计 ， 闫 色 一 般 用 一 些 比 较 舒 组 的 暖色。 对 于 卡 厂 的 出 错 信 息 应 当 用 清晰 的 语言 来 表达 ， 不 
要 使 用 太 过 于 专业 的 语言 ， 以 避免 用 尸 出 现 更 大 的 焦虑 。 
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EE 
SORRY * 对 不 起 能 为 您 找到 关于 此 关键 词 的 结 果 才 
SORRY 


[3 对 不 起 未 能 为 您 找到 关于 此 关键 词 的 结果 
1 DUIBUQIWEINENG ZHAODAOSHOUSUOJIEGUO 


Js 


在 错误 反馈 卡片 中 出 现 的 文案 要 确保 清晰 和 准确 ， 这 样 便于 用 户 了 解 错误 的 原因 ， 方 便 
用 户 正 确 地 做 出 下 一 步 的 判断 和 操作 。 在 移动 端 注册 过 程 中 ， 当 用 户 输 入 的 密码 不 符合 要 求 
时 ， 会 用 红色 文字 反馈 错误 及 其 原因 以 指引 用 户 ， 那 么 用 户 残 知道 问题 出 现在 哪里 并 且 知 道 
怎么 修改 了 (图 5$-13)。 所 以 ， 对 于 用 户 进行 操作 时 出 现 的 失误 要 及 时 地 提示 ， 并 提出 相关 
的 解决 方法 ， 以 免 出 现 重 大 到 的 错误 ， 造 成 用 户 的 困扰 。 


SIGNIN 2 


0 1] 基本 信息 


做 您 所 填写 密码 和 上 次 填写 不 一 致 ， 请 确认 


** 135 3268 6672 “太原 


站 (e) 


1 


5.2.5 ”提示 语言 的 共和 力 


其 实 “ 提 示 语 言 亲和力 ” 更 多 是 对 “容错 性 ”原则 的 一 种 补 序 ， 主 要 古 规 范 产品 在 
给 予 用 户 引 导 时 的 提示 语言 进行 考究 ， 以 便 减 少 和 降低 用 户 出 错时 的 焦虑 情 绕 。 所 以 提示 
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移动 痛 产 品 的 可 用 性 原则 
框 的 语言 描述 要 使 用 具有 亲和力 的 语言 ， 也 可 以 结合 时 下 的 一 些 热 词 安抚 用 户 的 情绪 并 给 
出 解决 方案 。 

出 错 信 息 应 当 友 好 并 富有 亲和力 ， 不 要 出 现 贡 备用 户 的 语气 。 如 果 按 照 可 用 性 的 理论 来 
说 ， 用 户 永 远 虱 是 被 服务 的 ， 只 有 产品 的 问题 需要 不 断 地 进行 优化 ， 也 残 是 说 ， 不 要 试图 从 
用 户 喘 上 找 问 题 ， 只 是 产品 本 身 不 能 正 硝 的 解读 用 户 的 操作 行为 而 已 。 所 以 不 要 在 错误 信息 
中 出 现 贡 备用 户 的 语气 ， 反 而 应 该 更 加 茂 情 地 为 用 户 解决 出 现 的 问题 ， 并 且 实 用 富有 杀 和 力 
的 语言 为 用 户 捉 供 “情感 文 持 ”， 再 主动 找 出 并 处 理 用 户 遇 到 的 问题 ， 这 样 能 有 效 地 缓解 氛 
败 带 来 的 强烈 的 负面 情绪 和 刺 油 。 处 在 这 样 一 个 时 疝 “ 服 务 设计 ”的 时 代 ， 产 品 需要 照顾 到 
更 全 面 ， 更 细致 的 用 户 体 验 ， 以 便 与 用 尸 产生 备 性 ， 所 以 作为 纠 错 以 及 警示 的 提示 语言 来 


说 ， 无 疑 是 很 重要 的 〈 如 图 5-14)。 


条 ， 您 输入 时 间 过 长 导致 语音 无 法 识别 


@@ 重新 语音 @ 换 种 方法 
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出 错 信息 在 提示 时 应 当 对 用 户 解 决 问题 提供 建设 性 的 帮助 ， 在 用 户 操 作 的 过 程 中 ， 出 现 


错误 要 及 时 反馈 并 提示 ， 使 用 户 可 以 尽早 发 现 错误 。 同 时 要 及 时 提供 纠 错 帮助 ， 优 先进 行 系 
统 目 动 纠 错 ， 如 末 不 行 的 话 融 要 调 取 纠 错 帮 助 ， 这 样 即使 用 户 操作 错误 了 ， 及 时 地 进行 纠 错 
就 显得 极为 局 效 了 。 


5.2.6 ”产品 的 易学 习性 


好 的 设计 往往 在 创新 的 同时 也 会 充分 考虑 到 用 户 使 用 的 体验 ， 用 户 是 舍 可 以 快速 上 手 是 
设计 师 必 须要 考 夸 到 的 重要 因素 。 如 果 一 区 产品 中 的 主要 功能 会 大 量 耗 费用 户 的 学 习 成 本 ， 
使 用 户 在 操作 过 程 中 感觉 不 舒服 ， 那 么 用 户 就 会 选择 借用 该 产品 。 

设计 师 在 针对 一 球 产 品 进 行 功能 升级 时 是 离 不 开 “ 创 新 ”的 ， 但 是 新 功能 推出 之 前 ， 往 
往 都 要 不 断 地 测试 如 何 可 以 让 用 户 快 速 上 手 ， 减 少 用 户 的 学 习 成 本 ， 并 且 拓 升 产品 的 可 用 
性 。 也 束 是 在 创新 的 同时 不 增加 用 户 的 学 习 成 本 ， 这 样 的 结果 是 最 好 的 。 例 如 微 信 在 加 入 
“语音 聊天 ”的 功能 时 便 是 如 此 ， 语 音 聊 天 可 以 让 用 户 利用 移动 器 进 行 社区 时 变 得 更 加 方 
便 ， 和 是 在 用 户 体 验 上 一 个 极 大 的 创新 。 

产品 的 “易学 习性 ”主要 表现 在 以 下 几 个 方面 : 借助 形态 语言 、 功 能 语言 、 动 作 语言 等 
方面 进行 人 机 交互 方式 的 补充 ， 也 融 是 人 机 交互 的 方式 要 更 加 多 元 化 ， 设 计 师 的 视野 也 要 更 
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一 一 视 党 营造 的 风 同 标 

加 的 广阔 ， 需 要 更 多 挖掘 用 户 本 能 的 一 些 反 应 作为 操作 的 主要 方法 。“ 语 首 转 文字 ”就 古 一 
个 非常 典型 的 “易学 习性 ”的 和 案例。 以 “ 讯 飞 输入 法 ”为 例 ， 由 于 其 增加 产品 对 于 用 户 语 首 
的 识别 能 力 ， 用 户 通 过 次 话 便 可 以 完成 文字 的 输入 以 及 编辑 ， 极 大 减少 了 用 户 的 操作 及 修改 
的 成 本 ， 增 加 了 产品 的 可 用 性 ， 而 且 用 户 付出 的 学 习 成 本 是 极 低 的 。 这 样 也 就 很 好 地 平衡 了 
“功能 创新 ”“ 学 习 成 本 “使 用 习惯 ”这 三 者 之 间 的 关系 (图 5-15)。 


语音 编辑 全 


昭 甘 日 一 八 棕 下 天 
星期 三 心情 不 太 


本 一) be 


产品 的 功能 升级 以 及 用 户 快 速 上 手 使 用 是 能 售 吸 引用 户 并 增加 用 户 留 存 度 非 癌 重要 的 标 
准 。 所 以 ， 行 业 才 会 不 断 地 提出 功能 轻 量 化 的 这 一 次 法 ， 其 本 质 还 是 由 于 手机 等 智能 产品 的 
使 用 场景 的 雁 上 户 化 以 及 时 间 的 不 定性 造成 了 产品 的 功能 要 求 更 加 高 效 ， 也 要 更 加 的 方便 用 户 
上 手 使 用 ， 以 减少 用 户 的 学 习 成 本 。 

在 产品 设计 的 过 程 中 ,设计 师 不 仅 要 考虑 到 产品 的 视觉 效 果 ， 还 是 要 从 产品 的 使 用 情 
景 、 用 户 操 作 习 惯 以 及 信息 的 推送 方式 等 方面 来 考虑 影响 用 户 的 体验 。 因 此 设计 师 在 设计 和 
规划 产品 的 过 程 中 应 不 断 地 总 结 产 品 的 可 用 性 原则 ， 让 产品 变 得 更 加 好 用 的 同时 ， 也 尽 可 能 
地 避免 设计 者 请 面 的 根据 目 己 主观 认识 对 产品 进行 设计 ， 做 到 真正 的 “以 人 为 本 ” 
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最 切 ， 安 蛙 是 旧金山 一 家 公司 的 名 字 ， 这 家 公司 在 2005 年 被 谷歌 收购 ， 由 谷歌 公司 和 
开放 手机 联盟 领导 。 如 今 安 卓 已 经 成 为 一 个 独立 的 生态 系统 ， 代 表 了 当今 行业 的 主流 趋势 ， 
在 市 场 上 占据 着 举足轻重 的 地 位 (如 图 6-1)。 
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6-1 原生 安里 界面 视觉 效 末 


首先 ， 了 解 一 下 安 卓 的 发 展 史 。2003 年 ，Andy Rubin 等 人 创建 安 卓 公司 ， 并 组 建安 卓 
团队 ，2005 年 8 月 由 谷歌 收购 并 注资 。 安 早操 作 系 统 最 初 由 Andy Rubin 开发 完成 ， 是 一 种 
基于 Linux 内 核 开 源 的 移动 设备 操作 系统 ， 主 要 应 用 于 智能 手机 和 平板 电脑 。2007 年 11 
月 ， 谷 歌 联 手 34 家 硬件 制造 商 、 软 件 开 发 商 及 电信 运营 商 组 建 开 放手 机 联盟 ， 共 同 研发 并 
改进 安 卓 系统 ， 并 且 以 Apache 开源 许可 证 的 授权 方式 ， 发 布 了 安 卓 的 源 代码 。 

2008 年 9 月 ， 谷 歌 正式 发 布 了 安 卓 1.0 系统 ， 随 后 在 2008 年 10 月 发 布 了 第 一 部 安 卓 
智能 手机 一 一 HTC G1。 这 区 手机 不 仅 采用 了 滑动 屏幕 设计 ，QWERTY 全 键盘 也 被 隐藏 在 屏 
幕 下 ， 同 时 还 支持 多 点 触 控 功能 。 当 然 它 的 其 他 一 些 设计 元 素 至 今 还 沿用 在 安 章 设计 之 中 ， 
例如 : 下拉 通 知 窗口 、 主 屏 小 插件 、 深 度 Gmail 整合 、 安 卓 市 场 。 安 卓 操 作 系统 还 被 应 于 到 
平板 电脑 、 电 视 、 数 码 相 机 等 设备 之 中 《图 6-2 )。 

从 安 齐 1.5 版 本 开始 ， 安 卓 开 始 用 甜点 作为 版 本 代号 ， 这 是 具有 里 程 碑 意义 的 一 个 版 
本 。 从 界面 角度 来 看 ，1.5 相 比 1.1 更 为 光滑 、 精 致 ， 比 如 搜索 栏 支持 具有 半 透 明 效 果 ， 愤 
幕 设 有 虚拟 键盘 。 这 是 虚拟 键盘 首次 出 现在 安 卓 系统 上 ， 也 意味 着 全 键盘 的 设计 从 此 将 不 
再 出 现在 安 卓 系统 之 中 (图 6-3 )。 
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2011 年 第 一 季度 ， 安 日 在 全 球 的 市 场 份额 为 48%， 首 次 超越 塞 班 成 为 世界 第 一 。 到 
2013 年 ， 安 早 市场 份额 达到 78.1%， 全 球 使 用 安 时 系统 的 设备 达到 10 亿 台 。 安 晶 4.4 于 
2013 年 11 月 1 日 正式 有 友 布 ， 此 次 系统 的 有 发布， 系统 不 仅 得 到 更 新 ， 还 提供 了 各 种 实用 的 小 
功能 ，UI 也 更 现代 智能 化 了 。 而 安 章 5.0 可 以 说 开启 了 安 卓 系统 新 篇 章 ， 提 升 了 与 供应 商 硬 
件 的 匹配 程度 ， 解 决 了 卡 机 问题 。 从 风格 来 看 ， 安 卓 5.0 使 用 一 种 新 的 Material Design 设计 
风格 ， 又 加 入 了 透明 度 方面 的 改进 。 同 时 界面 还 加 入 了 五 彩 缤纷 的 颜色 、 流 畅 的 动画 效果 ， 
呈现 出 一 种 清新 的 风格 。 采 用 这 种 设计 的 目的 在 于 统一 安 卓 设备 的 外 观 和 使 用 体验 ， 并 适用 
于 各 种 移动 端 设备 。Material Design 将 安 羊 的 UI 设计 推 同 了 一 个 更 高 的 层次 ， 以 人 性 化 的 
细节 、 动 画 设计 ， 为 用 户 带 来 很 强 的 视觉 冲击 力 ， 也 使 谷歌 成 为 用 户 界面 这 一 领域 最 大 的 获 
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营造 的 风向 标 
胜 者 《图 6-4)。 
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安 盾 和 iOS 哪个 好 ? 有 很 多 人 经 常会 问 到 这 个 问题 ， 首 先 从 情感 上 ， 你 喜欢 哪个 ， 哪 
个 就 好 ， 但 是 安 卓 和 iOS 还 是 有 很 大 差别 的 。iOS 来 源 于 Apple 的 OSX， 是 UNIX 系统 ， 
OSX 已 经 有 差不多 十 年 的 历史 ， 从 内 核 底 层 到 软件 架构 都 是 逐步 发 展 过 来 的 。iOS 使 用 
Object-C 这 个 古老 的 语言 来 开发 。 而 安 日 绝 大 部 分 都 是 使 用 Java 开发 ， 谷 歌 在 底层 也 修改 
了 很 多 东西 ， 安 卓 可 以 算是 一 个 全 新 的 操作 系统 。 因 为 安 卓 使 用 Java， 上 手 容 易 ， 开 发 效率 
会 更 高 ， 而 iOS 没有 虚拟 机 ， 性 能 要 好 一 些 ， 当 然 这 个 差距 会 随 着 谷歌 的 改进 越 来 越 小 。 
iOS 的 开发 框架 基本 上 和 Mac 上 通用 ， 相 同 的 理论 知识 ， 可 以 同时 开发 手机 和 Mac 应 用 ， 
但 是 安 卓 没有 这 样 的 优点 。 从 另 一 方面 来 看 ，Apple 严格 控制 着 iOS 系统 ， 在 大 部 分 情况 
下 ， 第 三 方 应 用 是 无 法 拿 到 所 有 API 的 ， 这 意味 系统 级 别 的 很 多 功能 只 有 Apple 能 做 ， 当 涉 
及 用 户 隐 私 iOS 会 弹出 相应 的 对 话 框 来 询问 用 户 。 相 有 反 安 日 完 全 不 一 样 ， 首 先 安 章 属 于 开 
源 ， 安 盾 人 允许 上 自由 蔡 换 系统 组 件 ， 安 章 也 没有 限制 API 的 情况 。 系 统 级 别 的 权限 是 下 放 到 广 
商 手 中 ， 在 三 科 同意 的 情况 下 ， 第 三 方 开发 者 可 以 做 任何 事情 。 而 普通 应 用 的 权限 认证 也 是 
在 安装 的 时 候 就 一 次 性 授权 完成 。 第 三 点 ，iOS 上 唯一 下 载 应 用 的 途径 就 是 App Store， 开 发 
者 做 应 用 上 线 还 要 通过 Apple 审核 ， 如 果 使 用 不 合格 的 应 用 ，Apple 束 会 下 架 该 产品 ， 管 理 
非 营 严格 。 反 过 来 安 盾 上 管理 非常 松懈 ， 广 商 可 以 内 置 应 用 ， 在 手机 上 预 朔 一 些 不 可 删除 的 
软件 。 开 发 者 不 用 经 过 审核 ， 残 可 以 上 传 软 件 ， 所 以 说 ， 谷 歌 的 官方 市 场 是 个 自由 市 场 。 同 
时 ， 国 内 还 存在 很 多 第 三 方 软件 市 场 ， 比 如 纹 豆 美 之 类 (图 6-5)。 
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60.1.1 安 旱 系统 的 导航 方式 


就 具体 布局 方式 和 控件 而 言 ， 安 卓 和 iOS 也 有 很 多 区 别 。 安 卓 一 般 将 tab 置 于 页 面 顶 
端 ， 通 过 滑动 和 点 击 来 切换 tab 栏 ; 当 tab 数量 多 时 ，tab 本 和 丑 也 可 以 滑动 切换 。 而 iOS 的 tab 一 
般 置 于 页 面 底部 ， 只 能 通过 点 击 进行 切换 〈 网 6-6)。 
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IE 一 视觉 营造 的 风向 标 
6.1.2 单个 项 目的 操作 


在 安 早 中 ， 单 个 项 目 操作 方式 有 两 种 点击 和 长 控 。 通 过 扣 击 可 以 进入 新 的 页 面 ， 而 长 
按 则 可 以 进入 编辑 状态 进行 具体 操作 。 在 iOS 中 ， 同 样 也 有 两 种 操作 方式 ， 与 安里 操作 方式 


相同 (图 6-7 )。 
图 6- 


7 


0.1.3 布局 万 式 


安 卓 一 般 为 左 对 齐 ， 而 iOS 更 多 为 居中 的 对 齐 方 式 〈( 图 6-8)。 
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Profile 三 Activity 


PUBLIC 


Alexandra Jones 
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has any little fortune? Jack 


4 品 1 © 4 min ago 
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Steve Patrick E33 
Johny Stimson 
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了 解 原生 安 卓 系统 


iOS 只 有 一 个 “HOME” 键 ， 安 里 里 面 有 三 个 虚拟 键 : “BACK” 键 ,“HOME” 键 和 多 任务 
键 。 在 大 多 数 情 况 下 ,“BACK” 键 和 页 面 中 的 返回 功能 一 样 或 者 还 可 以 切换 应 用 (图 6-9)。 


€ Track Order History 
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6.1.5” 动 效 规范 


两 种 系统 的 动 效 差别 似乎 不 是 很 大 ， 但 是 1OS 实现 过 
程 中 会 更 加 流畅 ， 卡 顿 现象 很 少 会 发 生 。 而 谷歌 推出 的 
Material Design 的 动 效 变化 很 大 。 最 突出 的 一 个 特点 束 是 
加 入 巧 浮 按钮 ， 代 表 关 这 个 页 面 的 主要 操作 ， 可 以 放置 在 
页 面 上 部 或 下 部 ， 通 过 其 发 生 的 动画 可 以 及 时 反馈 用 户 操 
作 ( 图 6-10)。 

下 面 针 对 国内 安 捍 开发 市 场 进行 分 析 。 目 前 国内 的 安 
早 开 发 还 是 主要 以 应 用 开发 为 主 ， 主 要 分 三 类 : 企业 应 用 
开发 、 通 用 应 用 开发 和 游戏 开发 。 上 有 具体 分 析 如 下 : 

a) 束 职 于 大 公司 的 开发 者 一 般 为 企业 自主 品牌 设计 
移动 器 加 体 方案。 除了 根据 需求 对 系统 进行 定制 外 ， 更 多 
的 工作 是 为 这 些 系统 编号 定制 的 应 用 。 

b) 殉职 于 初创 型 公司 或 者 独立 的 开发 者 ， 通 第 靠 外 
包 开 友 或 者 通过 谷歌 的 移动 广告 分 成 来 僵 利 。 
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一 一 视觉 营造 的 风向 标 

c) 应 用 开发 和 游戏 开发 与 第 二 类 相 类 似 ， 外 包 开 发 所 占 的 比例 古 很 大 的 。 

关于 国内 安 捍 开发， 不 得 不 提起 一 个 词 : 雁 瞩 化。 安 音 的 碎片 化 主要 表现 为 : 第 一 ， 终 
端的 碎片 化 ， 即 开发 者 需 为 不 同 版 本 操作 系统 和 不 同 硬件 配置 的 终端 进行 应 用 适 配 ; 第 二 ， 
应 用 商店 的 碎片 化 ， 除 官方 安 音 商城 外 ， 还 存在 各 OEM 三 商 内 置 并 运营 的 商店 ， 渠 道 过 多 
且 分 散 。 

布局 方式 也 是 应 用 界面 开发 的 重要 内 容 ， 在 安 时 中， 共有 五 种 布局 方式 ， 分 别 是 : 框架 
布局 、 线 性 布局 、 绝 对 布局 、 相 对 布局 、 表 格 布局 。 

a) 框架 布局 。 这 个 布局 可 以 看 成 是 在 墙 脚 堆 东 西 ， 有 一 个 滤 形 ， 依 次 在 墙角 堆放 东 
西 ， 后 放 的 东西 会 盖 住 原先 的 东西 。 这 种 简单 的 布局 方式 只 能 放置 简单 的 内 容 。 

b) 线性 布局 。 从 外 框 上 可 以 将 其 理解 为 一 个 div， 它 是 自 上 而 下 排列 在 屏 大 上 的 。 
在 每 一 个 线性 布局 里 又 包括 垂直 布局 和 水 平 布 局 。 在 垂直 布局 里 ， 每 一 行 只 有 一 个 元 
素 ， 当 有 多 个 元 素 时 依次 垂直 往 下 排列 ， 而 在 水 平 布 局 里 ， 只 有 一 行 ， 每 一 个 元 素 依次 
器 右 排列 即 可 。 

线性 布局 有 一 个 重要 的 属性 : weight。 在 垂直 布局 中 ，weight 代表 行距 ; 在 水 平 布局 
里 ，weight 代表 列 宽 ， 二 者 成 正比 例 增长 。 

c) 绝对 布局 。 绝 对 布局 相当 于 在 div 盒子 里 指定 了 绝对 属性 ， 并 且 用 坐标 轴 来 表示 元 
素 的 位 置 。 这 种 布局 方式 虽然 简单 ， 但 是 在 垂直 切换 过 程 中 出 现 多 个 元 素 时 ， 计 算 起 来 也 比 
较 复 杂 。 

d) 相对 布局 。 在 相对 布局 中 ， 可 以 将 某 一 个 元 陛 看 作 参 照 物 来 确定 其 布局 方式 。 

e) 表格 布局 。 表 格 布局 和 HTML 中 的 TABLE 比较 类 似 ， 在 其 中 又 包括 表格 行 ， 表 格 
行 可 以 定义 每 一 个 元 素 。 

以 上 五 中 布局 方式 可 以 结合 应 用 ， 而 每 一 种 布局 方式 都 有 自己 独特 的 方式 ， 以 保证 界面 
的 美观 性 。 

在 市 场 中 ， 安 早 适 配 的 机 型 有 很 多 ， 其 第 用 的 分 辨 挛 主 要 概括 为 以 下 几 种 : 1920pxx 
1080px，720pxx1280px，480pxx800px，640pxx960px，600pxx102px。 在 这 几 种 分 辩 率 中 ， 
1920pxx1080px 和 720pxx1280px 用 得 更 多 。 


谷歌 在 2014 年 肥 布 了 全 新 设计 语言 一 Material Design， 带 有 浓郁 的 谷歌 式 严 谨 和 理性 哲 
学 风格 的 Material Design 自从 发 布 以 来 备 受 关注 。 

Material Design 的 出 现 主要 是 为 了 统一 原生 安 早 智能 手机 、 平 板 电脑 、 人 台式 机 以 及 其 
他 平台 的 视觉 元 素 ， 以 为 其 提供 更 有 具 一 致 性 视觉 外 观 的 设计 语言 和 规范 。Material Design 
意 为 质感 设计 ， 其 核心 思想 是 在 屏幕 中 体验 物理 世界 ， 同 时 也 秉承 了 经 典 的 “魔法 卡 
片 ” 的 视觉 设计 思维 。 换 句 话 来 说 ， 该 设计 风格 保留 最 原始 纯净 的 形态 、 空 间 关 系 、 变 
化 与 过 渡 ， 加 以 灵活 的 虚拟 特性 ， 以 此 来 还 原 最 贴近 真实 的 体验 ， 最 终 实 现 简 洁 明 了 的 
视 党 效果 〈 图 6-11 )。 
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6G=11 


在 Material Design 中 ， 卡 片 是 承载 信息 的 重要 载体 。 除 了 具备 与 现实 中 卡片 相同 的 属性 
之 外 ， 它 还 拥有 其 独 有 的 特性 ， 比 如 : 伸缩 、 改 变形 状 ， 随 着 卡片 大 小 变换 隐藏 或 显示 内 
容 ， 多 个 卡片 拼接 或 分 裂 。 此 外 ， 站 在 空间 的 角度 来 看 ， 在 Material Design 中 存在 Z 轴 ， 且 
王 直 于 屏 帮 ， 可 以 此 表达 各 元 素 之 则 的 层 车 关系 。 所 有 元 素 的 厚度 都 是 1dp。 而 对 于 同 种 元 
系 的 相同 操作 ， 抬 升 的 高 度 是 一 致 的 〈 图 6-12)。 


SN 一 并 


A 


图 6-12 
6.2.1 ”Material Design 的 动画 效果 
在 Material Design 中 ， 为 了 更 好 地 表达 元 素 、 界 面 之 则 的 关系 ， 展 示 功 能 ， 可 加 入 的 动 


画 的 效果 。 包 括 以 下 几 种 。 


a) 释放 。 为 了 使 动画 和 逼真， 必须 特别 重视 释放 ， 并 且 要 结合 物理 学 知识 ， 掌 握 其 运动 
规律 (图 6-13 )。 


Y 轴 


时 间 线性 释放 
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移动 表面 设计 
有 一 一 视觉 营造 的 风向 标 

b) 水 波 反 馈 。 这 是 必 不 可 少 的 反馈 动画 效果 ， 它 可 以 更 好 地 将 点 击 的 位 置 与 操作 相 联 
系 ， 展 示 动 画 的 功能 特点 。 

c) 转 场 效 果 。 每 一 个 动画 的 设计 应 该 有 先后 顺序 ， 界 面 跳 转 可 以 通过 过 流动 画 来 表达 
空间 的 层级 关系 ， 以 起 到 引导 视线 的 作用 。 

d) 细节 处 理 。 这 里 主要 指 细节 动画 的 设计 问题 ， 具 体 表 现 通 过 图 标的 变化 等 方面 来 传 
达 丰 富 的 视觉 效果 (图 6-14)。 
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在 使 用 Material Design 的 时 候 ， 特 别 需 要 注意 的 是 ， 闫 色 不 宜 过 多 ， 但 必须 要 有 主 色 ， 
辅 色 则 可 按 需 要 选择 ， 在 此 基础 上 加 以 明度 、 饱 和 度 的 变化 即 可 。(〈 如 图 6-15) 
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0.2.2 ”图 标的 处 理 万 式 


1. 吕 面 图 标 

大 小 : 48dpx48dp。 常 规 形 状 可 以 亲 循 几 套 固定 栅 格 设计 。 但 是 需要 注意 很 多 细节 问 
题 : 不 要 给 彩色 元 素 加 投影 ， 层 闭关 系 不 能 超过 两 层 ， 左 上 和 角 不 能 出 现 折 角 ;投影 是 完整 客 
观 的 展现 ， 如 果 加 入 折 痕 ， 只 能 放 在 图 片 中 间 ， 且 最 多 只 有 一 条 ， 其 表面 也 不 能 有 图 案 ; 不 
要 加 入 透视 效果 ， 更 不 能 弯曲 (图 6-16)。 
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2. 小 图 标 

大 小 : 24dpx24dp。 图 形 限 制 在 中 央 20dpx20dp 区 域内 即 可 。 对 于 小 图 标 ， 通 常 优先 使 
用 Material Design 默认 图 标 ， 用 最 简洁 的 图 形 来 表达 ， 不 加 入 任何 空间 感 。 同 样 ， 在 小 图 标 
中 也 有 固定 的 栅 格 化 设计 ， 其 线条 、 衬 际 尽 量 保持 宽 2dp、 圆 角 羊 径 2dp。 当 然 ， 在 实际 情 
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况 之 中 要 有 具体 问题 具体 对 符 〈 图 6-17 )。 


20px 24px 


20px 24px 
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在 颜色 使 用 中 ， 小 图 标的 颜色 一 般 使 用 纯 黑 和 纯 白 。 不 同 的 使 用 状态 调整 透明 度 即 可 ， 
例如 黑色 54% 为 正常 状态 ，26% 为 禁用 状态 ; 白色 100% 为 正常 状态 ，30% 为 禁用 状态 
(图 6-18)。 


#000000 
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26% Inactive Icons 

Jhit 
100% 关上 上 上 上 上 上 上 
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6.2.3 图片 的 选取 方式 


在 插 述 具体 事物 时 ， 应 优先 使 用 照片 或 者 配 以 相关 的 插画 。 对 于 图 片上 的 文字 ， 需 要 加 
入 轻微 的 庶 音 来 提升 文字 的 可 读 性 和 识别 性 ， 一 般 来 说 ， 深 色 氮 单 的 透明 撤 在 20% 一 40% 之 
间 即 可 ， 浅 色 遮 单 透 明度 在 40% 一 60% 之 间 。 切 记 让 单 不 能 捉 住 整 张 图 片 ， 只 要 让 住 文字 区 
域 即 可 。 或 者 使 用 半 透 明 的 主 色 禾 雷 图 片 也 是 处 理 文字 效果 的 一 种 方法 。 需 要 注意 的 为 一 所 
是 ， 在 图 瞩 加 载 过 程 的 之 中 ， 要 注意 透明 度 、 曝 光度 、 饱 和 上 度 3 个 指标 依次 变化 ， 以 达到 细 
腻 的 最 终 效 果 〈 图 6-19)。 
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6.2.4 ”系统 字体 的 规 荡 性 


瑞 文 字体 使 用 Roboto， 中 文字 体 使 用 思源 黑体 。 具 体 来 说 ，Roboto 包括 : Thin、 
Light、Regular、Medium、Bold 和 Black 等 字体 样式 ， 而 思源 黑体 字体 包括 : Thin、Light、 
Demlight、Regular、Medium、Bold 和 Black 等 字体 样式 。 


第 用 字号 有 : 小 号 字体 : 12dp; 正文 或 按钮 文字 : 14dp; 小 标题 : 16dp; 超大 号 文字 : 
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34dp、44dp、56dp、110dp (图 6-20)。 
Roboto Thin 
Roboto Light 
Roboto Regular 
Roboto Medium 
Roboto Bold 
Roboto Black 
Roboto Thin ltalic 
Roboto Light ltalic 
Roboto ltalic 


语 话 话 话 话 话 话 


St 站 
St 站 
St 站 
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St 并 
St 并 
[ St 并 


有 
EE 
隐 
Es 
[at 
EE 
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0.2.5 ”系统 布局 的 规 沁 性 


为 了 保证 所 有 元 素 可 以 交互 操作 ， 最 小 点 击 区 域 范 围 扩 寸 为 : 48dpx48dp。 而 栅 格 系统 
的 最 小 单位 是 8dp， 那 么 为 了 保持 一 致 性 和 规范 性 ， 全 部 的 间距 和 做 才 都 采取 8dp 的 整数 
倍 。 为 了 方便 大 家 学 习 ， 这 里 做 了 一 些 规 范 性 的 收集 (但 是 具体 情况 需要 具体 对 繁 )， 具 体 
参数 如 下 : 
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状态 栏 高 度 : 
实际 情况 可 进行 调整 ); 
钮 : 56dpx56dp 或 者 40dpx40dp ; 


64dpx64dp 或 者 40dpx40dp; 


24dp; 导航 栏 : 
底 部 tab 栏 : 


高 度 ， 按 
悬浮 按 
用 户头 像 : 
小 图 标点 击 区 域 : 
48dpx48dp; 侧 边 抽 导 到 屏 磊 右边 的 距离 : 56dp; 卡 厂 


了 解 原生 安 卓 系统 


Brunch this weekend? 
Ali Connors — ll be in your neighborhood …| 


2 则 的 距离 Ea 8dp:; 9 分 割 线 留 站 的 距离 [] : 8dp ; 9 之 pr 一 Wish | could.... 


间 的 留 日 : 16dp; 文字 左 侧 对 齐 基线 : 72dp。 

需要 额外 注意 的 是 56dp 这 个 数值 ， 大 多 数 的 控 
件 〈 对 话 框 、 肖 单 ) 的 宽度 可 以 按 56dp 的 整数 倍 来 
OO 


与 PC 端的 留 
(图 6-21 )。 


除 此 之 外 ， 还 需要 了 解 各 种 组 件 的 规范 性 
体 组 件 的 规范 内 容 : 
一 般 见 到 的 都 是 以 列表 形式 、 网 格 


以 下 整理 了 一 些 具 
1) 底部 动作 条 : 


形式 出 现 ， 在 交互 操作 上 可 以 上 下 深 动 操作 (图 6-22)。 
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Aaron Bennett 


Abbey Christensen 


Ali Connors 


(650) 555-1234 
Mobile 9 


(323) 555-6789 
Work 9 


aliconnors@example.com 
Personal 


ali_connors@example.com 
Work 


2) 按钮 : 按钮 的 种 类 很 多 ， 使 用 的 场景 也 部 有 所 不 同 。 上 其 体 可 以 分 为 巧 浮 按钮 、 凸 起 
按钮 和 局 平 按钮 。 那 么 如 何 使 用 这 些 按钮 什么 情况 下 使 用 这 些 按钮 呢 ? 因为 交互 场景 不 
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一 一 视 沉 营造 的 风向 标 

同 ， 投 钮 的 样式 也 会 有 所 不 同 。 举 例 说 明 ， 在 使 用 范围 广 且 是 重要 操作 的 场景 ， 一 般 使 用 巧 
浮 按钮 ， 以 便 给 予 用 户 更 多 的 提示 ; 在 需要 展示 众多 信息 时 ， 为 了 更 好 地 表达 信息 ， 一 般 选 
用 杞 起 按钮 ， 在 常规 的 界面 中 ， 以 及 用 户 所 付出 的 学 习 成 本 极 低 的 时 候 残 可 以 使 用 局 平 化 按 
钮 ， 单 纯 通过 闫 色 完 成 对 用 户 挟 击 的 提示 。 
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如 果 在 使 用 悬浮 按钮 时 ， 只 能 出 现 一 个 悬浮 按钮 ， 按 钮 不 能 与 对 话 框 、 菜 单 的 边缘 贴 
边 ; 按钮 必须 全 部 呈现 在 界面 之 中 ， 不 能 被 其 他 按钮 或 元 素 遮 挡 ， 同 时 按钮 也 不 能 遮挡 其 他 
按钮 或 元 素 ， 当 出 现 滚动 条 并 滑动 到 底部 时 ， 甚 浮 按 钮 要 隐藏 ， 不 能 遮挡 住 列 表 之 中 的 内 
容 ， 最 重要 的 一 点 是 ， 悬 浮 按钮 的 位 置 不 能 随意 摆 放 ， 但 可 以 贴 着 左右 两 边 的 对 齐 基 线 ， 常 
见 尺寸 有 两 种 :56dpx56dp 和 40dpx40dp (图 6-24)。 


十 广 CD 省 A 
© 9 © 加 U Q 
6-24 


3) 卡 上 请: 卡片 的 布局 方式 和 内 容 多 种 多 样 ， 但 是 从 整体 上 来 说 ， 在 卡 厂 中 最 多 只 有 两 
块 操 作 区 域 ， 分别 是 辅助 操作 区 和 主要 操作 区 。 在 辅助 操作 区 中 ， 最 多 包含 两 个 操作 项 ， 如 
打 需 要 更 多 操作 ， 必 须 出 现下 拉 沫 单 ， 其 余部 分 都 是 主要 操作 区 。 一 般 来 说 ， 这 里 说 的 卡 
请 ， 痢 统一 市 有 2dp 的 圆 角 。 那 么 在 什么 样 的 情况 之 下 会 选择 使 用 卡 厂 呢 ? 例 如， 需要 同时 
展示 多 种 内 容 时 ， 而 这 些 内 容 长 度 不 定 ， 和 内 容 之 间 不 需要 进行 比较 ， 那 么 在 这 情况 下 者 需要 
考虑 使 用 卡片 。 除 此 之 外 ， 当 文本 内 容 超过 三 行 ， 可 以 将 已 有 的 列表 换 成 卡 上 厂 ， 换 句 话 说 ， 
需要 展示 更 多 文字 时 ， 卡 片 代 痊 了 网 格 的 存在 《图 6-25)。 
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Kangaroo Vall 


dtwo hours south (< 


"ighlands of Ne 
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4) 已 片 : 在 一 个 小 空间 中 表达 众多 信息 的 一 个 组 件 。 篆 见 的 应 用 有 日 期 、 选 择 联 系 人 
(图 6-26 )。 


€ Compose 


€ Compose 


Contact Name ) 全 Trevor Hansen © Alex Nelson 


trevor_h@example.com 


Plans Plans for the weekend 


仿 trevorhQexample.com 


Hi, Hi, 

ljust \ 地 hansen._t@example.com | just wanted to check in and see if you had any 
plans ， 本 plans this upcoming weekend. We are thinking of 
heading up to Napa. Let us know if you'd like to go heading up to Napa. Let us know if you'd like to go 
and we'll make reservations. and we'll make reservations. 
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5) 对 话 框 : 在 对 话 框 中 ， 包 括 标题 、 内 容 和 操作 项 。 在 交互 操作 方面 ， 有 一 种 对 话 框 
征 当 用 户 点 击 对 话 框 外 的 区 域 时 ， 对 话 框 是 不 会 关闭 的 。 一 般 情 况 下 ， 尽 量 不 要 出 现 滚动 
和 条， 除非 空 间 不 足 ， 那 么 深 动 条 选择 默认 显示 。 在 对 话 框 中 ， 通 第 将 取消 类 的 操作 放 在 左 
边 ， 右 边 一 般 放 置 会 引起 变化 的 操作 项 。 除 此 之 外 还 要 写 明 该 操作 的 具体 效 末 ， 文 字 要 明 
硝 ， 使 用 户 能 体验 到 很 强 的 功能 识别 性 。 那 么 另 一 种 对 话 框 很 显然 是 不 带 有 操作 项 的 ， 这 是 
一 种 相对 简易 的 对 话 框 。 那 么 当 用 户 进 行 触摸 操作 时 ， 对 话 框 会 关闭， 扩 击 对 话 框 外 时 ， 对 
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话 框 同 样 会 关闭 ， 相 对 应 的 操作 也 会 取消 。 除 此 之 外 ， 对 话 框 也 可 以 做 成 全 屏 式 ， 右 上 角 还 
会 有 操作 按钮 ， 比 如 保存 、 发 送 、 添 加 、 分 享 等 重要 的 操作 。 这 种 功能 性 文案 一 定 要 简洁 明 
确 ， 不 能 使 用 户 有 含糊 其 辞 的 感觉 。 最后， 对 话 框 的 留 白 值 一 般 为 24dp (图 6-27)， 


6) 分 阳线 : 一 般 在 列表 中 有 头像 或 图 片 时 ， 将 分 割 线 与 文字 左 对 齐 ; 
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Google Wi-Fi 


Exaellenit 


B02.1x EAP 


RaggWed 


Phone ringtone 


O 
O 
O 
O 
O 
© 
© 
O 
八 


None 


Callisto 


Dione 


Ganymede 


Hangouts Call 


Luna 


Oberon 


Phobos 


Duvic 


CANCEL 


Use Googles location 
service? 


Let Google help apps determine 
location. This means sending 
anonymous location data to 
Google, even when no apps are 
running. 


DISAGREE AGREE 


6=271 


va a 


Sound & notification 


Sound 


Media volume 


<) 

© Alarm volume 
一 
Ring volume 

几 9 
一 


Also vibrate for calls 


Interruptions 


Phone ringtone 
Titania 


Default notification ringtone 
Tethys 


Use Googles location 
service? 


Let Google help apps determine 


location 
anonym 
Google, 
running. 


. This means sending 
ous location data to 
even when no apps are 


| DISAGREE AGREE 


Tz 


下 16 


12:30 


48 


没有 头像 或 图 
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片 、 图 标 等 元 素 时 ， 需 要 用 分 隔 线 将 其 划分 。 需 要 注意 的 是 ， 分 隔 线 不 是 随便 使 用 的 。 例 
如 ， 图 片 本 身 就 可 以 表达 内 容 之 间 的 划分 情况 ， 就 不 必 采 用 分 隔 线 。 另 一 种 情况 就 是 留 白 ， 
通常 会 优先 使 用 留 白 ， 分 隔 线 的 层级 高 于 留 白 〈 图 6-28)。 


字 4 12:30 


,> i yi 


一 Q © 


Today Ali Connors 15 min 


Brunch this weekend? 
Brunch this weekend? Ml be in your neighborhood doing errands .. 
心 Ali Connors — lll be in your neighborhood.. 
me, Scott, Jennifer 2hr 
Summer BBQ 
Wish | could come, but lm out of town this .… 


1 Summer BBQ 4 


to Alex, Scott, Jennifer — Wish | could ... 


本 Sandra Adams 6hr 
@ Oui oui oui oui 
Sandra Adams — Do you have Paris reco... Do you have any recommendations? Have .… 
Birthday gift Trevor Hansen 12 hr 
> Trevor Hansen 一 Have any ideas about .… Birthday gift 


Have any ideas about what to get Heidi for .… 


Recipe to try 


Britta Holt 一 We should eat this: grated .. Britta Holt 
Recipe to try 


We should eat this: grated squash, corn and .… 


§ Giants game 
* David Park — Any interest in seein . 
由 人 David Park 
Giants game 
ak Weekend Any interest in Seeing the Giants play next .. 
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7) 网 格 : 网 格 由 单元 格 组 成 ， 每 一 个 单元 格 中 的 卡片 用 来 承载 信息 内 容 。 在 卡 厂 中 同 
样 也 包括 主 操作 区 和 副 操 作 区 ， 在 同一 个 网 格 中 ， 二 者 的 内 容 和 位 置 要 保持 一 致 。 在 一 个 界 
面 里 ， 副 操作 区 的 位 置 可 以 分 布 在 上 下 左右 四 个 角 洲 。 对 于 交互 操作 手势 方面 ， 网 格 只 能 
直 深 动 ， 单 独 的 卡片 不 能 滑动 、 拖 放手 势 。 在 规范 性 方面 来 说 ， 网 格 中 的 单元 格 的 间距 一 般 
为 2dp 或 8dp( 如 图 6-29)。 


所 Fun times QQ ”要 


123 photos 


网 格 


b=29 
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一 一 视 党 营造 的 风 同 标 
8) 列表 : 列表 一 般 由 每 行 的 卡片 构成 。 列 表 同 样 包 括 主 操作 区 和 副 操作 区 。 副 操作 区 
一 般 在 右 侧 ， 其 余部 是 主 操作 区 。 同 样 在 一 个 列表 之 中 ， 三 者 的 内 容 、 位 置 以 及 交互 操作 要 
保持 一 任 。 列 表 控 制 项 一 般 包含 展开 ， 收 起 ， 拖 动 排 序 ， 义 选 框 等 重要 操作 ， 也 可 以 包含 快 
捷 键 提示 或 二 级 亲 单 等 提示 信息 (图 6-30)。 


列表 


,Photos 


' Jan 9 2014 


主要 操作 次 要 操作 


Single-line item 


Single-line item 


OO Single-line item 


一 加 加 图 


主要 操作 次 要 操作 或 信息 
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9) 来 单 : 一 般 来 说 ， 来 单 不 会 超过 2 级 ， 通 党 会 把 顺序 固定 的 、 操 作 频 繁 的 末 单 选项 置 
于 顶部 ， 而 顺序 不 确定 的 可 以 按 动 态 排 序 ， 上 下 则 距 值 为 8dp。 在 交互 操作 方面 ， 为 了 让 用 户 
可 以 直观 了 解 并 进行 操作 ， 必 须 把 当前 不 可 用 的 选项 显示 出 来 ， 当 出 现下 拉 末 时 时 ， 闲 单 会 原 
地 展开 ， 并 且 会 新 住 当前 选项 ， 成 为 当前 琳 蛙 的 第 一 项 ， 但 是 位 置 始 终 要 与 水 平 对 齐 ， 如 果 且 
单 靠近 屏幕 时 ， 位 置 要 适当 下 移 调整 ， 必 要 时 候 还 需 添 加 滚动 条 〈 图 6-31)。 
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缘 部 分 ; 


时 会 出 现 一 张 环 形 进度 条 的 纸 亡 。 


Settings 


Basics 


Search engine 
Google 


Pop up if high priority 


When deVice is locked 
Show all notifiGation content 
Start time 

10:00 AM 

Advanced 


Voice search 
English (US) 


Privacy 


Settings 


Basics 


Search engine 
Google 


Pop up if high priority 


When device is locked 
Hide all notification content 


Start time 
10:00 AM 


Advanced 


Voice search 
English (US) 


Privacy 


vv 2 mm 12:30 Vv 2 mm 12:30 
Settings 


vv & [= 12:30 


Settings 
Basics 


Search engine 
Google 


Pop up if high priority 起 


Show all notification content 
Hide sensitive notification content 
Hide all notification content 


Advanced 


Voice Search 
English (US) 


Privacy 


Basics 


Caearrh anmine 


Show all notification content 
Hide sensitive notification content ® 


Hide all notification content 


Start Time 
10:00 AM 


Advanced 


Voice Search 
English (US) 


Privacy 


10) 检测 左 : 通常 以 对 话 框 的 形式 展现 ， 而 日 期 和 时 间 选 择 占 部 是 固定 组 件 (图 6-32)。 

11) 活动 指示 需 与 进度 条 : 进度 条 分 为 两 种 ， 一 种 是 线形 进度 条 ， 它 只 出 现在 纸 厂 的 边 
为 一 种 是 坏 形 进度 条 ， 它 可 放置 在 芒 浮 按钮 之 上 ， 其 实在 环形 进 肛 条 里 ， 叉 划分 为 
未 知 时 间 和 已 知 时 间 两 种 。 在 活动 指示 融 中 ， 可 以 采用 进度 条 的 形式 来 表现 加 载 信 ， 
之 外 ， 可 以 添加 小 的 动画 效果 来 展示 下 拉 刷 新 ， 但 是 需要 注意 的 是 ， 列 表 位 置 是 不 动 的 ， 这 
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已， 除 此 
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一 一 视 党 营造 的 风 同 标 


Friday 
MAR 
ls 


March 2014 


CANCEL OK CANCEL OK 


= 


12) 滑 块 : 在 滑 块 左右 的 位 置 可 以 适当 地 增加 图 标 或 是 文本 框 。 对 于 非 连 续 的 背 块 ， 必 
须要 标明 具体 数值 “图 6-33)。 


Normal Normal 

国 一 一 图 国 一 一 上 
Hover Hover 

国 一 一 国 国 一 
Focus Focus 

国 一 一 一 。 串 国 一 12 
Click Click 

于 一 一 @ 一 国 本 一 © ”" 
Disabled Disabled 

图 6-33 
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13) 宿主 视图 和 无 宿主 视图 。 首 先 来 看 宿主 视图 ， 它 最 多 包含 一 个 操作 项 ， 但 是 不 能 
图 标 ， 一 般 置 于 移动 端的 底部 位 置 ， 在 PC 端 ， 则 应 置 于 悬浮 按钮 的 左下 角 ， 但 不 能 遮挡 人 
悬浮 按钮 ， 它 的 留 白 值 通常 为 24dtp。 而 无 宿主 视图 相对 来 说 就 很 简单 了 ， 它 类 似 于 宿主 视 
图 ， 但 可 以 自 定义 位 置 和 样式 ， 二 者 要 保持 统一 规范 性 (图 6-34)， 


24 24 24 
上 一 上 

24 24 
i 


This item already has the label “travel". You can 


80 
add a new label. 
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14) 小 标题 : 它 是 一 种 特殊 的 瓦 上 请， 一般 与 列表 或 网 格 同 时 存在 ， 用 来 表达 内 容 的 分 类 
与 信息 的 排序 。 当 出 现 滚 动 条 滚动 时 ， 小 标题 会 固定 在 顶部 的 位 置 ， 当 出 现 浮动 按钮 时 ， 小 
标题 会 目 动 改变 位 置 与 文字 对 齐 〈 图 6-35 )。 


A 3 12:30 
Inbox 


Brunch this weekend? 
Ali Connors 一 | 上川 bein your neighborhood... 


Summer BBQ 4 
to Alex, Scott Jennifer 一 Wish | could ... 


Birthday gift 


”7 Trevor Hansen 一 Have any ideas about .. 


Recipe to try 
Britta Holt 一 We should eat this: grated ... 


Giants game 


Oui oui 
Sandra Adams 一 Do you have Paris reco... 
咕 
§ David Park — Any interest in + 
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有 一 一 视觉 营造 的 风向 标 

15) 开关 : 一 般 情 况 下 ， 单 个 开关 项 才 会 使 用 它 ; 在 同一 列表 中 有 多 项 开头 时， 建议 使 
用 选择 器 (图 6-36 )。 
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16) tab 栏 : 它 只 是 用 来 展示 不 同类 型 的 内 容 ， 不 能 EN 数量 一 般 为 
2 一 6 个， 超出 的 部 分 则 会 变 成 滚动 式 或 左右 翻 页 进行 操作 碍 看 。 对 于 视觉 部 分 ， 文 字 显 示 要 
清晰 完整 ， 字 体 规范 性 要 严 庆 ， 出 现下 划 线 时 ， 其 高 度 一 般 为 2tp〈 图 6-37)。 


Pagetitle 


NO. ONE ITEM TWO Tt HIRD ITEM FOURTH 
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17) 输入 框 : 它 的 表现 形式 有 很 多 种 ， 简 单 的 一 根 线条 即 可 表达 。 除 此 之 外 ， 很 有 必要 
将 输入 框 的 两 种 状态 设计 出 来 ， 即 选中 操作 状态 和 错误 状态 ， 那 么 相应 的 横 线 宽度 变 为 
2dp， 颜 色 也 要 随 之 变化 。 如 果 输 入 框 的 高 度 达 到 48dp 之 上 ， 而 横 线 不 在 点 击 区 域 的 底部 ， 
这 里 还 要 空 出 8dp 的 距离 。 当 出 现 提 示 性 文字 时 ， 注 意 输 入 框 的 高 度 变 化 以 及 其 可 点 击 范 围 
的 大 小 变化 (图 6-38 )。 
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Focus CU 650 


Normal with input text 大 E50-555-1234 Mobile 


€ Createanaccount Compose 


Correct the following errors: username and To Al 


password 


Alison Connors 


Name 二 
"lls aliconnors@example.com 
Stephanie Smith 
alLconnorsQ@Qexample.com 
Username 
stephsm Q@email.com 


Alex Nelson 
alex.nelson(@example.com 


alex_nelson(@example.com 


That name is already being used © 


Passwords don't match 


Birthday 


November v 23 1990 
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18) 提示 : 当 用 户 进行 鼠标 登 停 、 获 取 焦 点 、 手 指 长 按 等 交互 操作 时 会 出 现在 小 图 标 上 
(图 6-39 )。 

19) 侧 边 抽 屈 : 当 从 左边 划 出 时 ， 遭 循 列 表 的 布局 方式 将 占 满 屏 幕 ， 距 离 右 边 为 
56dp。 除 此 之 外 ， 也 支持 深 动 操作 ， 收 起 抽 层 式 ， 则 会 保留 到 之 前 的 深 动 位 置 ， 如 果 不 需 要 
深 动 ， 设 置 和 帮助 反馈 就 防止 列表 后 面 即 可 (图 6-40)。 
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通常 操作 呈 
鼠标 悬 停 号 
EE 
获取 焦点 局 
EE 
0-39 0-40 


最 后 总 结 ， 在 Material Design 中 ， 提 倡 使 用 卡片 ， 并 且 卡 片 还 规定 了 圆 角 ， 这 必须 要 结 
合 纵 深 感 较 强 的 阴影 ， 这 样 的 目的 是 要 与 其 他 区 域 区 分 开 来 。 但 是 又 要 慎 用 卡片 ， 比 如 想 要 
表达 众多 信息 时 ， 就 不 建议 使 用 卡片 ， 因 为 卡片 的 边框 会 对 注意 力 造成 和 干扰。 总 之 ， 
Material Design 吻 谈 、 吻 用 ， 属 于 无 障碍 设计 。 
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7.1 视觉 设计 师 的 职责 与 职业 发 展 规 划 


如 今 ， 移 动 互联 的 形态 已 经 发 生 了 翻天 禾 地 的 变化 ， 从 业 人 人员 对 行业 的 理解 越 来 越 
深刻 ，UI 设计 行业 也 从 一 开始 的 彰 牙 ， 到 火热 ， 再 到 过 热 。 很 多 互联 网 企业 盲目 的 进 
和 入， 导致 行 业 过 热 的 现象 在 一 段 时 间 非 党 明显 ， 现 在， 行业 的 泡沫 已 经 逐步 地 消退 下 
来 。 互 联网 企业 对 于 行业 的 理解 也 越 来 越 深刻 ， 对 于 用 人 选 人 的 标准 也 在 不 断 地 提升 ， 
行业 已 经 不 需要 那些 为 奶 求 热钱 而 育 目 进入 的 伪 从 业者 ， 真 正 需要 的 是 能 够 适应 并 专注 
的 设计 从 业者 。 


7.1.1 移动 联网 行业 现状 


近 几 年 ， 随 着 智能 手机 地 快速 普及 和 移动 网 络 的 发 展 ， 移 动 互联 网 领域 创业 的 黄金 时 代 
已 经 来 临 。 而 且 国家 关于 “互联 网 1” 以 及 “万 众 创业 ”的 政策 指引 ， 极 大 地 刺激 了 企业 加 
入 互联 网 行业 的 积极 性 。 

虽然 移动 互联 网 的 发 展 使 创业 变 得 更 加 人 简单， 但 是 移动 互联 网 发 展 到 今天 似乎 遇 到 了 瓶 
颈 : 一 方面 传统 的 行业 和 企业 不 断 接 触 互 联网 ， 但 是 似乎 实际 运作 的 结果 尚未 达到 预期 ， 男 
一 方面 ， 草 根 创 业者 大 批 涌 入 ， 一 时 间 开 发 了 更 多 的 APP，APP Store 应 用 数量 和 下 载 数 量 
快速 增长 。 但 是 由 于 从 业者 水 平 恨 邯 不 齐 ， 并 且 对 于 APP 的 用 户 定 位 、 核 心 功能 、 视 觉 效 
果 以 及 上 线 后 的 运营 方式 都 存在 各 种 偏差 ， 大 多 数 APP 处 于 扔 了 可 惜 ， 前 途 渺 茫 的 “ 鸡 
及 ”状况 。 

与 此 同时 ， 以 BAT( 百 度 、 阿 里 巴巴 、 腾讯) 为 代表 的 传统 互联 网 巨头 纷纷 进军 移动 互 
联网 ， 在 衣食 住 行 ， 金 融 交 易 ， 教 育 平台 等 方面 均 有 建树 ， 依 靠 自 己 本 身 积 累 的 大 量 固 定 用 
户 以 及 专业 的 产品 研发 与 设计 方法 将 市 场 快 速 的 占领 。“ 微 信 ” 的 凯 起 便 是 一 个 典型 的 例 
子 。 互 联网 巨头 之 间 也 相互 竞争 ， 无 形 中 压缩 了 创业 者 的 生存 空间 。 

国内 与 国际 的 互联 网 巨头 在 品牌 、 资 金 、 技 术 以 及 用 户 群 等 方面 的 绝对 优势 ， 普 通 
创业 者 与 其 竞争 无 异 于 以 卵 击 石 ， 所 有 这 一 切 让 本 就 举步维艰 的 普通 创业 者 的 处 境 更 是 
雪上 加 有 霜 。 

对 O20O 的 过 分 热 炒 ， 以 及 P2P 模式 催生 了 大 量 初创 以 及 不 成 熟 的 互联 网 企业 ， 和 需求 
过 盛 也 导致 大 量 不 合格 的 互联 网 从 业者 涌 入 这 个 行业 ， 而 随 着 潮水 退去 大 量 互联 网 企业 缩 
水 甚至 倒闭 。 

所 以 ， 所 谓 的 “瓶颈 期 ” 主要 是 由 于 宏观 经 济 形势 ， 行 业 运 营 模 式 ， 互 联网 传播 技术 
发 展 以 及 互联 网 从 业者 等 几 方面 原因 共同 造成 的 结果 。 

虽然 移动 互联 网 产业 貌似 出 现 了 一 些 问题 ， 但 未 来 市 场 发 展 的 主流 方 同 依 旧 是 移动 互联 
占据 主导 ， 行 业 会 越 来 越 趋 于 理性 和 专业 。 

对 于 UI 设计 师 来 说 ， 在 这 样 一 个 时 代 ， 应 该 跟 上 时 代 的 步伐 ， 扩 展 自己 技能 的 深度 以 
及 广度 ， 让 自己 能 够 在 视觉 设计 、 交 互 设计 、 产 品 思维 以 及 语言 表达 等 方面 全 面 提 升 。 新 的 
时 代 需 要 更 多 的 复合 型 人 才 ， 需 要 能 够 在 做 好 本 职工 作 的 基础 之 上 ， 掌 握 其 他 辅助 技能 。 例 
如 ， 和 工程 师 的 工作 交接 ， 以 及 手绘 插画 能 力 ， 还 包括 动 效 设计 和 3D 技术 的 具备 和 培养， 
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这 些 都 是 视觉 设 计 师 需要 掌握 的 技能 。 

本 章 将 重点 介绍 天 于 视觉 设计 师 在 新 形势 下 所 要 做 出 的 改变 和 提升 以 及 职业 规划 。 还 会 
重点 讲 到 ， 视 党 设 计 师 该 如 何 与 工程 师 进 行 项 目 上 的 对 接 ， 以 便于 初级 UI 设计 师 能 够 更 好 
适应 行业 需求 。 


7.1.2 设计 师 的 职业 发 展 规划 


目前 我 国 设计 师 的 从 业 人 数 大 约 为 1700 万 ， 而 截至 2015 年 底 ， 我 国企 业 数 量 为 
1546.16 万 家 ， 也 就 是 说 平均 每 家 企业 拥有 1.1 个 设计 师 。 中 国 设 计 师 主要 分 布 行业 为 平面 设 
计 、 产 品 设计 、 建 筑 室 内 设计 、 服 装 设计 、 工 业 设计 、 互 联网 产品 设计 以 及 视觉 设计 等 几 个 
类 别 。 

随 着 移动 互联 、 人 工 食 能 、 物 联网 以 及 大 数据 等 新 兴 行 业 和 技术 的 高 速 发展 ， 未 来 移动 
UI 设计 、 产 品 设计 等 细 分 领域 将 会 出 现 巨大 的 人 才 缺 口 。 科 技 的 发 展 必 将 催生 一 个 设计 人 
才 需 求 的 高 峰 。 

在 上 文 也 提 到 ， 虽 然 现 在 互联 网 行业 的 发 展 和 现状 对 于 设计 从 业者 来 讲 面 临 看 极 大 
的 挑战 ， 每 年 进入 移动 互联 设计 行业 的 从 业者 也 不 在 少数 ， 但 是 专业 的 、 高 端的 设计 人 
才 的 需求 依然 是 很 大 的 一 个 缺口 ， 这 对 于 拥有 明确 职业 规划 的 设计 师 来 讲 ， 确 实 是 一 个 
很 好 的 机 明 。 

那么 对 于 设计 从 业者 来 说 ， 优 秀 设 计 师 和 初级 设计 师 的 区 别 在 于 哪些 方面 呢 ? 核心 的 区 
别 在 于 是 耕 上 其 备 设 计 思 维 。 优 秀 的 设计 师 可 以 灵活 利用 各 种 设计 思维 去 优化 和 提升 用 户 体 
验 ， 例 如 敏捷 设计 、 细 节 设 计 、 服 务 设计 等 方法 论 的 合理 使 用 。 

其 实 设 计 师 的 想法 和 设计 思维 是 一 个 设计 师 的 灵 瑶 所 在 ， 因 为 它 可 以 很 好 地 鞭策 设计 师 
针对 产品 调动 上 自己 所 擎 握 的 具体 技能 来 优化 产品 并 提升 用 户 体 验 。 

通过 几 张 来 目 Facebook 产品 设计 总 监 所 绘制 的 草图 可 以 直观 地 看 出 普通 设计 师 与 优秀 
设计 师 之 则 的 区 别 。 图 7-1、7-2 分 别 是 普通 设计 师 和 优秀 设计 师 思 考 和 设计 一 蒜 产 品 的 不 
同方 式 ， 普 通 设 计 师 往往 都 是 单一 的 去 思考 问题 ， 而 优秀 设计 师 会 从 一 点 进行 辐射 ， 找 出 多 
种 不 同 的 思路 去 进一步 优化 设计 方案 。 


图 7-1 2 


图 7-3、7-4 代表 的 是 普通 设计 师 和 优秀 设计 在 职业 和 技能 规划 上 的 区 别 ， 普 通 设 计 师 


更 多 是 不 断 重 复 一 件 简单 的 事情 ， 并 且 很 少 从 工作 中 总 结 经 验 以 及 寻找 最 优化 的 解决 方案 ， 
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而 优秀 的 设计 师 会 不 断 的 提升 目 己 的 职业 以 及 技能 的 而 上 度 ， 并 且 在 设计 过 程 中 进行 思考 与 总 
结 ， 寻 找 最 优化 的 方案 去 解决 现 有 的 问题 ， 之 后 再 挑战 更 有 难度 的 工作 与 项 目 。 


复杂 
简单 
理解 问题 设计 解决 撑 行 方案 解决 方案 
方案 

i. 

复 姑 
理解 问题 设计 解决 远 行 方案 解决 方案 
方案 
7-4 


下 面 ， 作 者 与 读者 分 享 一 下 个 人 从 业经 历 。 我 是 一 名 视 沉 设计 出 喘 的 设计 师 ， 以 前 不 论 
是 从 事 平面 设计 还 是 从 事 互 联网 产品 视觉 设计 ， 在 设计 过 程 中 我 友 现 ， 很 多 企业 对 于 产品 视 
觉 设 计 的 要 求 并 不 高 ， 所 以 我 也 就 随波逐流 ， 降 低 目 己 对 产品 视 沉 设计 的 标准 。 这 样 其 实 会 
使 目 己 开始 无 形 的 退步 ， 征 不 明智 的 。 节 后 会 及 现 目 己 在 设计 中 逐 湖 迷失 了 目 我 ， 无 法 保持 
技能 提升 以 及 产品 需求 之 间 的 平衡 。 

不 过 是 什么 的 理由 ， 视 党 设计 师 都 不 应 该 去 降低 目 己 对 于 设计 图 的 标准 。 因 为 它 是 针 
对 用 户 雷 求 所 展现 的 最 为 直观 的 设计 效果 ， 也 是 对 于 视觉 设计 师 最 根本 的 能 力 体 现 。 所 以 
设计 师 不 管 服 务 于 什么 行业 ， 服 务 于 什么 人 群 ， 虱 应 该 理 所 应 当地 让 我 们 的 产品 在 功能 
和 视觉 上 达到 一 个 最 理想 、 最 优化 的 状态 ， 然 后 和 工程 师 进 行 深 入 对 接 去 一 起 打造 一 球 优 
筋 的 产品 。 


图 7-5、7-6 是 截取 了 一 些 个 人 参与 项 目的 一 些 设计 样稿 ， 包 括 登 录 页 面 以 及 加 载 


页 面 
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节省 
除了 设计 思维 之 外 ， 其 次 是 完成 工作 流程 的 掌握 和 体验 ， 明 确 自己 在 产品 设计 和 开发 过 
程 中 所 扮演 的 角色 和 所 起 到 的 作用 ， 以 及 如 何 通 过 视觉 设计 很 好 地 连接 交互 产品 以 及 程序 开 
发 这 两 个 环节 ， 真 正 起 到 承上启下 的 作用 。 其 实 判断 一 个 设计 师 优 秀 与 否 和 从 业 时 间 并 没有 
必然 关系 ， 如 果 不 懂 得 在 工作 中 总 结 自己 的 经 验 ， 对 于 自身 的 职业 素养 以 及 职业 技能 的 提升 
也 不 是 很 敏感 的 话 ， 从 业 时 间 再 长 也 不 会 成 为 优秀 的 设计 师 。 视 觉 设 计 师 需要 在 工作 中 不 断 
深化 自己 的 专业 技能 。 
1， 以 人 为 本 
产品 在 视觉 设计 中 并 不 是 以 好 看 为 标准 ， 被 用 户 接受 和 认可 的 设计 才 是 真正 的 好 设计 。 
在 设计 之 初 ， 这 也 是 很 多 设计 师 很 难 去 平衡 的 关系 。 设 计 师 一 开始 就 要 考虑 到 用 户 的 需求 和 
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接受 能 力 ， 所 以 产品 设计 时 总 是 要 把 用 户 分析 放 在 第 一 位 ， 类 似 于 用 户 问 卷 ， 用 户 体验 地 图 
等 者 是 为 了 更 好 的 用 户 调 研 而 出 现 的 工作 方式 ， 因 为 用 户 才 是 一 切 活 动 及 产品 的 核心 。 此 
外 ， 还 要 充分 考 夸 用 户 的 习惯 以 及 产品 的 使 用 环境 。 

2. 创新 为 王 

对 品牌 的 整体 设计 不 是 攒 空腹 造 ， 细 节 设 计 的 提出 便 考 大 了 这 一 点 ， 即 设计 产品 时 通 御 
会 保留 苋 品 的 框 染 和 整体 的 交互 流程 ， 而 在 功能 细 市 上 做 文章 。 也 束 是 实现 功能 的 目的 是 一 
致 的 ， 但 区 别 在 于 实现 方式 方法 的 差异 。 本 质 上 应 该 扎实 地 立足 于 品牌 自身 的 定位 ， 按 照 其 
定位 的 目标 市 场 来 设计 ， 在 实施 设计 时 既 要 充分 考 夺 到 用 户 的 习惯 和 痛 氮 ， 也 要 对 外 展示 产 
品 的 核心 苋 搜 力 。 所 以 产品 功能 的 创新 就 显得 尤为 重要 。 

3. 精致 的 视觉 设计 

互联 网 产品 的 视觉 设计 是 退 求 像 系 级 完美 的 设计 方式 ， 所 以 ， 规 范 性 绝对 是 视觉 设计 的 
基础 。 

图 7-7 中 所 展示 的 栅 格 化 设计 便 是 设计 视 沉 界面 过 程 中 规范 视觉 设计 效果 最 音 用 到 的 方 
法 ， 网 页 设计 中 更 多 是 以 12 顶 格 法 进行 网 页 布局 的 划分 (图 7-7)。 
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在 工程 师 眼中 ， 世 界 是 由 逻辑 组 成 的 ， 而 不 是 像素 。 简 单 地 说 ， 一 个 程序 是 由 数据 和 远 
得 组 成 的 ， 罗 和 辑 是 有 条 理 的 、 可 数学 论证 的 、 严 说 的 《图 7-8)。 
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因为 目标 人 不同， 工程 师 会 在 心里 抵触 设计 师 看 似 “ 天 马 行 空 ”的 想法 ， 而 视觉 设计 师 应 


该 站 在 开发 的 角度 去 审视 目 己 的 设计 ， 因 为 设计 的 视 沉 效果 最 终 还 是 要 靠 程 序 最 终 呈 现 ， 这 
就 需要 在 功能 ， 视 觉 ， 开 发 之 间 寻 求 平 衡 。 


作为 一 名 合格 的 设计 师 ， 必 须要 清楚 项 目 在 设计 和 开 友 过 程 当中 的 每 一 个 流程 以 及 
细 市 ， 以 便于 视觉 设计 对 产品 起 到 承 上 局 下 的 作用 ， 设 计 师 需要 去 平衡 产品 研发 、 交 互 
流程 以 及 产品 开发 这 几 个 方面 之 间 的 关系 ， 所 以 和 工程 师 在 项 目 上 的 对 接 是 设计 师 需 要 
掌握 的 工作 技能 和 经 验 常 识 。 本 市 将 重点 介绍 设计 师 在 产品 视觉 设计 完成 后 ， 该 如 何 与 
工程 师 进行 项 目 上 的 对 接 ， 以 便 初 入 设计 行业 的 从 业者 开展 工作 过 程 当中 也 能 够 顺利 适 
应 ， 了 解 项 目 设计 的 流程 。 


1.2.1 什么 是 标注 


标注 是 设计 师 与 工程 师 进 行 项 目 对 接 过 程 中 的 重 中 之 重 ， 工 程 师 是 含 能 够 完整 地 还 原 设 
计 效 末 以 及 区 互动 效 ， 很 大 一 部 分 取 雇 于 标注 是 售 细 致 ， 很 多 情况 下 我 们 需要 结合 工程 师 开 
发 习惯 来 进行 标注 ， 所 以 一 定 要 和 工程 师 及 时 沟通 。 

设计 师 不 需要 对 每 一 张 效 果 图 都 进行 标注 ， 提 交 的 标注 页 面 能 确保 工程 师 在 开 友 每 
个 页 面 时 都 能 顺利 进行 束 可 以 了 。 一 般 要 求 设 计 师 标注 视 沉 效 末 的 无 非 束 是 两 种 情况 ， 
第 一 种 是 页 面 的 视觉 元 素 全 都 要 标注 ， 第 二 种 是 根据 产品 的 功能 分 类 标注 代表 性 页 面 就 
可 以 了 。 比 如 可 以 在 项 目 设计 完成 后 ， 根 据 页 面 的 布局 先 规 划 产 品 视 党 效果 的 控件 库 ， 
再 进行 标注 会 方便 很 多 。 控 件 库 其 实 束 古 根据 视觉 元 素 的 功能 和 分 类 进行 展示 ， 例 如 ， 
设计 师 会 将 产品 中 所 有 导航 栏 的 图 标 ， 所 有 tab 选项 栏 的 图 标 ， 所 有 提示 框 以 及 所 有 按钮 
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一 一 视 沉 营造 的 风向 标 
的 控件 分 类 放 在 一 起 进行 展示 ， 就 如 同 把 视觉 设计 产品 拆 分 成 一 个 义 一 个 零件 分 类 放 
置 。 控 件 库 的 总 结 可 以 很 好 地 提高 标注 以 及 切 图 的 工作 效率 ， 也 可 以 有 效 保证 产品 在 后 
期 功能 延展 时 页 面 的 视觉 一 致 性 。 

图 7-9 素材 来 日 于 互联 网 ， 图 中 所 展示 到 的 束 是 产品 视觉 控件 库 中 关于 系统 图 标 展示 的 
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有 些 公司 为 了 要 求 设计 师 能 够 更 好 地 和 工程 师 进 行 项 目 上 的 对 接 ， 会 要 求 设计 完 产 品 的 
视觉 效 果 之 后 编写 产品 “规范 性 说 明文 档 ”， 以 便 更 好 地 展示 视觉 界 面 中 关于 控件 的 尺寸 、 
属性 、 间 距 、 标 准 色 以 及 标准 字 的 设计 规范 。 规 范 性 说 明文 档 的 作用 主要 包括 项 目 视 觉 元 系 
的 归 关 ， 标 注 结 末 的 展示 以 及 后 期 功能 延展 时 更 好 地 你 证 视觉 效果 的 一 致 性 。 那 么 我 们 需要 
去 标注 页 面 当中 哪些 内 容 呢 ? 

1. 标准 字 的 颜色 ， 大 小 以 及 样式 

图 7-10 所 展示 的 就 是 视觉 界面 标准 字 在 标注 过 程 中 的 颜色 、 大 小 以 及 样式 的 展示 ， 通 肖 
在 标注 的 过 程 中 ， 需 要 注意 的 是 有 些 企业 会 要 求 设 计 师 在 标注 时 界面 的 单位 使 用 逻辑 像素 来 进 
行 标 注 ， 后 文 我 们 在 介绍 适 配 的 时 候 会 重点 介绍 实际 像素 与 交 辑 像 系 之 间 的 转化 。 


适用 于 IPhone 尺 寸 750X1334 (字体 : 苹 方 常规 平滑 英文 字体 : SF) 


Headline 18pt 

太 标 题 17pt 

ee. 16pt 
7-10 
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在 标注 闫 色 时 ， 也 需要 按照 闫 色 的 六 进 制 展 示 来 完成 标注 ， 例 如 #000000， 工 程 师 可 以 
快速 识别 并 调 取 视 党 信息 。 

系统 文字 出 现 加 粗 时 也 会 使 用 Regular 和 Bold， 或 者 W3、W6 来 代表 文字 正常 和 加 粗 
两 种 状态 。 

2， 产品 视 党 效果 标准 色 的 使 用 

产品 的 标准 色 包 括 产品 的 主体 色 、 辅 助 色 、 对 比 色 以 及 背景 颜色 等 均 是 需要 标注 的 内 容 
(图 7-11 )。 


重要 SS 导航 和 大 部 分 button 
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着 23223333 
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图 7-11 


在 标注 产品 标准 色 时 ， 需 要 按照 产品 使 用 雇 色 的 比重 进行 顺序 排列 。 在 这 里 展示 一 下 关 
于 产品 视觉 效果 在 使 用 颜色 时 的 比例 关系 ， 使 用 传统 APP 的 配色 方案 : 无 色彩 系 70%， 以 
浅 灰 以 及 深 灰 为 主 ， 经 党 使 用 在 产品 背景 色 用 色 中 ; 有 人 色彩 系 ” 30%， 主要 根据 用 户 特点 、 
行业 特征 以 及 企业 形象 来 确定 。 有 色彩 系 中 主 色 调 占 70%; 辅助 色 占 20%， 作 用 是 烘托 主 
色 ， 丰 富 画 面 的 作用 ; 在 此 基础 之 上 也 可 以 加 入 少许 对 比 色 ， 大 约 占 10%， 作 用 是 做 点 睛 使 
用 ， 提 升 视 觉 配色 的 对 比 ， 增 加 视 党 张力 ， 但 有 顷 注意 对 比 色 的 使 用 不 可 过 多 ， 人 否则 画面 的 视 
觉 效 末 会 变 得 很 乱 。 

图 7-11 所 示 ， 标 注 标准 色 时 除了 标准 色 的 使 用 比重 和 分 类 之 外 ， 还 需要 使 用 六 进 制 来 
标注 其 用 色 ， 当 前 颜色 主要 使 用 的 位 置 以 及 场合 ， 还 包括 控件 以 及 产品 布局 。 

3， 控件 尺寸 范围 以 及 控件 间距 的 标注 

在 标注 过 程 中 通常 需要 将 控件 的 标注 按照 功能 分 类 ， 标 注 有 代表 性 的 控件 即 可 ， 以 便 提 
局 工作 效率 。 同 时 也 要 标注 控件 之 间 的 尺寸 (包括 实际 尺寸 和 切 图 范围 ) 以 及 控件 之 间 的 间 
距 〈 图 7-12)。 


177 


移动 界面 设计 
一 视觉 营造 的 风向 标 


字体 大 小 : 16pt 
宇 体 颜色 ， 刘 33333 


坊 转 分 类 名 和 森 


有 提示 字体 大 小 : 14pt 
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分 制 线 : #999999、0.5pt 
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mt 下 字体 颜色 #33333 
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驭 调 ， _ 勿 定 43pt 触 模 状 态 色 值 ，#ECECEC 
270pt 
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从 图 7-12 的 视 沉 规范 性 文档 便 可 清楚 的 看 到 ， 在 标注 的 过 程 中 需要 明确 给 出 控件 的 大 
小 ， 间 距 的 数值 ， 并 且 在 设计 视 沉 效 末 使 用 像素 〈px) 单位 时 ， 需 要 你 证 控件 的 大 小 为 偶 
数 ， 以 便于 后 期 和 逻辑 像 系 进行 转化 ， 包 括 长 宽 、 圆 角 的 大 小 ， 而 且 圆 角 大 小 对 于 不 同 的 平 
台 的 数值 要 求 是 不 一 样 的 (图 7-13 )。 


二 PM 


MyHome 


4. 公共 控件 的 尺寸 与 标注 
一 般 产 品 视觉 设计 的 公共 控件 包括 顶部 的 导航 栏 、 状 态 栏 、 压 部 的 选项 ，tab 以 及 二 级 
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页 面 的 tab， 各 个 搜索 系统 的 设计 都 属于 公共 控件 的 范畴 ， 所 以 其 视觉 效 果 也 应 该 在 圆 角 、 
大 小 等 方面 保持 一 致 〈 图 7-14)。 


f ‘ i A 门人 
2 已 @' ， * 二 
icon 区 域 : 40 林 40pt 


. | | | 


图 7-14 
按钮 图 标的 样式 ， 大 小 和 点 击 状 态 都 是 我 们 需要 去 研究 的 。 图 标的 话 需 要 考虑 到 在 不 同 
的 系统 中 的 最 小 点 击 范 围 ， 例 如 iOS 最 小 的 手指 触 碰 区 域 为 44x44pt， 而 在 安 蛙 中 的 最 小 的 
手指 触 碰 区 域 是 48x48dp， 也 就 是 在 以 750x1334px 的 设计 环境 进行 设计 时 ， 需 要 将 最 小 的 
手指 点 击 区 域 定 为 88x88px， 灰 色 区 域 代 表 其 最 小 点 击 范 围 ， 是 作为 png24 位 模式 图 的 透明 
区 域 进行 展示 (图 7-15、7-16、7-17)。 
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一 一 视觉 营造 的 风 回 标 

图 标 在 移动 端 中 的 状态 较 PC 端 还 是 有 很 大 区 别 的 。 按 钮 在 PC 病 可 以 分 为 点 击 前 ， 点 
击 时 以 及 不 可 点 击 ， 还 有 鼠标 管 俘 状态 。 在 移动 器 中 ， 则 不 存在 基 停 状态 ， 只 有 点 击 前 ， 扣 
击 后 以 及 不 可 点 击 这 三 种 状态 存在 。 所 以 需要 把 这 3 种 状态 分 别 进行 标注 和 展示 ， 以 方便 工 
程 师 在 开发 过 程 中 使 用 和 快速 了 解 其 不 同情 况 之 下 的 交互 方式 。 

视觉 设计 师 在 进行 界面 图 标 和 按钮 设计 时 ， 需 要 针对 图 标 和 按钮 所 面 对 的 不 同情 况 完成 
相对 应 的 视 党 样式 设计 和 文字 信息 传递 内 容 ， 这 些 工作 也 是 视觉 设计 师 要 完成 的 项 目 内 容 
(如 图 7-18、7-19 )。 
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5. 弹 框 的 标注 
作为 产品 容错 性 当中 非常 重要 的 一 个 体现 ， 弹 框 可 以 为 用 户 在 进行 关键 性 操作 过 程 中 提 
供 操作 以 及 纠 错 提示 。 
ed 
用 户 拓 供 准 确 和 及 时 的 提示 。 以 确认 用 户 在 当前 操作 过 程 当中 的 选择 ， 是 否 继续 执行 。 束 像 
是 在 使 用 PC 端 进行 “彻底 删除 文件 ”操作 的 时 候 ， 在 文件 删除 之 前 ， 会 给 予 用 户 个 确认 
售 删 除 的 提示 ， 以 便 减 少 用 户 的 误 操 作 。 一 般 弹 框 的 出 现 ， 主 要 包括 以 下 两 种 情况 ， 一 种 
是 系统 弹 框 的 出 现 〈 图 7-20)。 
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界面 设计 的 后 续 工 作 
另 一 种 是 关于 功能 的 描述 的 一 些 弹 框 ， 类 似 于 升级 或 者 是 获得 积分 等 等 。 我 们 在 标注 过 
程 当 中 ， 对 于 弹 框 的 标注 也 是 一 个 重点 。 
般 对 于 iOS 系统 ， 其 默认 弹 框 的 圆 角 大 小 基本 上 是 30px， 那 么 在 针对 于 第 三 方 应 用 
进行 弹 框 设计 的 时 候 其 圆 角 大 小 可 以 根据 设计 需求 来 设 定 ， 但 是 圆 角 大 小 必须 满足 偶数 像素 
数 ( 图 7-21、7-22)。 
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图 7-23 展示 的 是 弹 框 在 标注 中 需要 注意 的 地 方 ， 前 面 的 这 些 内 容 主 要 是 介绍 了 关于 视 
觉 界 面 需要 标注 的 具体 内 容 和 分 类 ， 这 里 再 给 大 家 去 介绍 一 些 标 注 时 需要 注意 的 一 些 细 三 
(图 7-23 )。 
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一 视觉 营造 的 风向 标 

6. Tab Bar 

标注 Tab Bar 其 实 比 较 特殊 ， 设 计 师 可 以 单独 标注 图 标 大 小 和 文字 大 小 ， 同 时 还 可 以 将 
图 标 文字 算 作 一 个 控件 将 其 整体 切 出 来 作为 素材 使 用 (图 7-24)。 
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其 次 ， 在 标注 的 时 候 可 以 将 标注 效果 图 分 为 模 同 间距 、 纵 向 间距 以 及 控件 尺寸 三 类 来 进 
行 标 注 ， 这 样 的 标注 结束 会 更 加 清晰 ， 更 利于 工程 师 进行 快速 的 得 看 ， 也 残 是 一 套 界 面 用 三 
个 组 成 来 展示 。 


1.2.2 ”产品 的 标注 方法 


那么 在 标注 的 过 程 中 ， 通 常会 使 用 到 以 下 的 两 种 方法 。 第 一 种 是 使 用 PS 进行 标注 ， 第 
二 种 方法 是 使 用 一 些 标注 的 插件 来 进行 标注 。 比 如 Parker 就 是 标注 时 经 常会 使 用 到 的 一 款 高 
效 的 标注 以 及 测量 软件 ， 也 可 以 更 快速 地 提高 视 沉 设计 师 标 注 时 的 工作 效率 。 

设计 师 使 用 Photoshop 进行 标注 的 过 程 中 往往 会 比较 耽误 时 间 ， 也 会 亚 得 很 及 烦 ， 所 以 
建议 各 位 设计 师 最 好 还 是 信 助 于 标注 软件 来 进行 标注 ， 这 样 可 以 更 快 出 图 以 节省 产品 设计 过 
程 中 的 时 间 成 本 。 


本 市 的 内 容 介 绍 切片 资源 输出 的 过 程 以 及 切片 的 常用 方法 。 根 据 产 品 视 觉 效果 标注 完成 
规范 性 说 明文 档 之 后 ， 就 需要 设计 师 根据 标注 完成 之 后 的 结果 进行 切片 ， 有 时 候 也 称 作 切 图 。 

为 什么 十 要 切 图 昵 ? 主 要 是 为 了 帮助 工程 师 在 开 友 过 程 中 从 视觉 效果 的 源 文件 中 处 理 和 
整合 一 些 在 开发 过 程 中 无 法 或 者 很 难 用 代码 实现 的 视觉 效果 。 工 程 师 通常 会 考虑 使 用 图 片 素 
材 来 加 以 将 代 ， 基 于 这 个 原因 ， 需 要 去 完成 切 岁 这 工作 。 

互联 网 早期 ，PC 并 网 页 切 图 大 多 由 视觉 设计 师 来 完成 ， 后 来 随 大 互 联网 公司 产品 的 设 
计 与 开发 流程 逐步 细 化 与 完善 ， 很 多 互联 网 公司 PC 并 的 切 图 工作 交 给 工程 师 来 完成 ， 再 后 
来 移动 端 产 品 设计 的 崛起 ， 切 图 这 道 工 序 大 多 还 是 由 视 沉 设计 师 来 完成 的 。 对 于 大 多 数 视觉 
设计 师 来 说 ， 切 图 的 过 程 非常 乏味 和 无 聊 ， 所 以 ， 为 提 融 工作 效率 寻找 快速 有 效 的 切 图 方式 
还 是 非常 重要 的 。 

下 面 将 把 实际 工作 中 稼 用 到 的 一 些 切 图 注意 事项 逐一 指出 ， 也 会 重点 介绍 在 切 图 的 过 程 
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中 某 些 规范 以 及 需要 注意 的 地 方 。 

其 实 切 岗 和 标注 如 出 一 略 ， 两 者 之 间 的 关系 是 极为 紧密 的 。 严 格 得 说 关于 切 图 没什么 特 
别 固定 的 工作 流程 ， 工 程 师 的 开发 习惯 的 不 同 ， 所 要 求 的 切 图 的 输出 效果 和 方法 也 不 同 ， 所 
以 当 设 计 师 进行 切 图 之 前 最 好 先 和 对 接 的 工程 师 进 行 交流 ， 避 人 免 由 于 沟通 不 当 造 成 的 工作 量 
增加 以 及 工作 效率 降低 等 情况 。 因 为 做 这 项 工作 是 为 了 给 开发 打下 基础 ， 所 以 有 效 的 沟通 显 
得 非常 重要 。 

在 前 面 的 内 容 中 提 到 过 ， 关 于 移动 端 应 用 的 设计 以 及 开发 ， 现 在 主要 是 根据 OS、 安 早 
以 及 Windows Phone 三 大 系统 的 要 求 来 进行 。 目 前 更 多 以 OS， 安 日 这 两 球 系 统 占 主导 。 需 
要 设计 师 和 工程 师 按照 每 个 不 同系 统 所 规范 的 要 求 来 进行 设计 以 及 开发 。 所 以 对 于 切 图 来 
说 ， 也 有 不 同 的 细 分 要 求 。 


7.3.1 il0 系统 的 切 图 方式 


1. 偶数 的 要 求 

在 iOS 系统 下 的 环境 进行 设计 产品 元 素 的 矿 寸 和 切 儿 ， 所 有 的 控件 以 及 图 片 元 素 的 视 
度 和 高 度 都 应 该 是 偶数 ， 这 样 设 计 一 方面 方便 产品 显示 的 效果 ， 万 一 方面 也 方便 产品 的 视 
觉 设 计 稿 从 实际 像 系 癌 旬 辑 像素 进行 转化 。 由 于 iOS 系统 的 抗 锯 此 机 制 的 限制 ， 如 果 切 图 
得 出 以 及 产品 视觉 元 么 的 矿 寸 不 是 偶数 的 话 ， 会 导致 开 及 之 后 的 切 岁 输出 在 预览 和 使 用 时 
会 变 得 模糊 。 

建议 读者 在 切 图 的 时 候 ， 如 果 古 按照 控件 的 实际 大 小 进行 切 图 时 ， 最 好 在 其 四 周 留 下 2 像 
素 的 透明 边缘 区 域 ， 以 防止 工程 师 在 开 及 及 变 成 动 效 时 切 图 元 系 的 边缘 产生 锯 亏 《图 7-25 )。 

如 琳 图 标 、 按 钮 以 及 其 他 视觉 元 系 本 里 具 备 点 击 效 果 ， 并 且 其 实际 范围 小 于 iOS 系统 当中 
规范 的 最 小 点 击 热 区 的 话 ， 那 束 需 要 按照 其 最 小 的 点 距 热 区 的 大 小 来 切 图 ， 也 束 是 44x44pt。 

如 果 设 计 师 是 按照 750x1334px 这 样 的 设计 环境 来 进行 视觉 蜗 你 真 出 图 的 话 ， 对 于 这 种 
情况 最 小 的 切 图 范围 也 要 大 于 等 于 88x88px。 主 要 是 为 了 保证 产品 开发 完成 后 手指 点 击 图 标 
时 的 点 击 热 区 足够 大 ， 避 免 出 现 点 击 无 反馈 这 种 现象 (图 7-26)。 


= 7-26 


2. 需要 为 工程 师 提 交 几 套 切 图 
根据 现 有 芋 果 手机 的 屏幕 等 级 和 尺寸 来 说 ， 可 以 分 为 以 下 两 种 ， 一 种 是 以 iPhone 4、 
iPhone 5、iPhone 6、iPhone 7 为 主 的 2 倍 屏幕 等 级 ， 其 尺寸 以 640x960px 至 750x1334px 的 
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一 一 视 党 营造 的 风 辣 标 
设计 坏 境 为 主 。 为 外 一 类 是 iPhone 手机 中 各 种 plus 版 本 的 三 倍 屏 大 等 级 ， 也 惑 是 物理 分 辩 
率 斥 十 在 1080x1920pX， 屏 幕 实际 尺寸 在 5.5 喘 寸 的 手机 。 

所 以 ， 如 果 设 计 师 现在 主要 是 针对 于 750x1334px 为 主 的 设计 环境 来 进行 视觉 高 保 真 图 
设计 的 话 ， 在 切 完 图 片 之 后 本 身 所 使 用 的 就 应 该 是 2 倍 图 。 所 以 在 切 图 输出 时 设计 师 需 要 在 
切 图 名 称 后 加 入 “@2x” 这 样 的 命名 后 级 ， 例 如 home _icon_search@2x.png。 

在 此 基础 之 上 ， 根 据 屏 戎 倍率 的 要 求 ， 只 需要 在 此 2 倍 图 的 基础 之 上 扩大 1.5 倍 就 可 以 
得 到 适 配 在 各 种 iPhone plus 版 本 当中 的 切 图 ， 并且 在 切 图 名 称 后 加 入 “@3x”， 例 如 
home_icon_search@3x.png。 

现在 随 着 iOS 系统 的 升级 ， 早 期 的 iPhone 3GS 早已 退出 手机 市 场 ， 现 在 设计 师 不 需要 
再 考虑 之 前 的 单 倍 切 图 。 所 以 视觉 设 计 师 在 给 工程 师 提 交 切 图 输出 物 的 时 候 需 要 提交 两 套 切 
图 ， 也 就 是 一 套 2 倍 图 ， 一 套 是 在 放大 1.5 倍 之 后 所 得 到 的 3 倍 图 (图 7-27)。 

同时 ， 根 据 按 钮 和 控件 不 同 的 使 用 和 交互 情况 ， 例 如 点 击 前 、 点 击 时 及 不 可 点 击 〈 茜 
用 ) 状态 也 要 分 别 对 其 进行 切 图 和 输出 (图 7-28)。 


120px 


© 


-一 80px 一 - 


80px © Sy normal pressed disabled 
ico_car@2x.png ico_car@3x.png 正常 按 下 共用 
1=27 图 7-28 


3. 切 图 元 素 的 平 铺 

如 条 设计 师 在 设计 背景 图 或 者 产品 控件 时 使 用 到 重复 元 系 的 图 案 或 者 是 纯色 的 话 ， 那 么 
设计 师 只 需要 提供 给 工程 师 一 小 块 切 图 即 可 。 所 以 要 求 背景 图 如 果 加 入 背景 纹理 的 话 最 好 是 
上 共有 规律 性 的 一 些 纹 理 ， 例 如 点 阵 、 网 格 、 横 线 等 (图 7-29)。 


7-29 
最 好 不 要 使 用 斜 线 或 者 不 规则 纹理 以 及 颜色 渐变 ， 这 种 视觉 元 际会 增加 工程 师 在 开发 过 
程 中 的 工作 成 本 。 
切 图 元 辫 平 铺 这 样 的 做 法 可 以 很 好 的 减少 产品 安 狠 包 占 用 的 空间 以 及 加 快 产 品 打开 和 运 
行 速度 。 工 程 师 在 开 及 的 时 候 只 需要 通过 代码 拉 伸 和 无 限 平 铺 这 个 部 分 即 可 。 


1.3.2” 安 早 系 统 的 切 图 万 式 


在 安 持 系统 中 ， 其 切 图 方法 和 iOS 所 要 求 的 大 致 是 一 样 的 。 在 这 里 给 大 家 介绍 一 种 安 早 
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特有 的 图 片 处 理 方式 ， 主 要 是 针对 于 带 有 圆 角 这 样 一 种 特殊 图 形 进 行 图 片 处 理 的 点 9 文件 。 
1. 点 9 文件 

在 安 卓 系统 中 ， 切 图 输出 以 及 元 素 设 计时 不 用 遵循 偶数 的 原则 ， 不 过 在 对 符 带 有 圆 角 的 

特殊 图 形 以 及 元 素平 铺 时 一 般 会 应 用 一 个 特殊 切 图 输出 文件 ， 就 是 “点 9” 文件。 由 于 在 该 


扩展 名 为 “9.png”， 所 以 被 称 为 “点 9” 文件 (图 7-30)。 
在 安 早 系统 中 ， 切 图 输出 以 及 元 系 设 计时 不 用 遵循 侦 数 的 原则 ， 不 过 在 对 生 市 有 圆 角 的 
特殊 图 形 以 及 元 系 平 铺 时 一 般 会 应 用 一 个 特殊 切 图 输出 文件 ， 就 是 “后 9” 文 件 。 由 于 在 该 


扩展 名 为 “9.png” 例如 : anniu.9.png， 所 以 被 称 为 “点 9” 文 件 。 
“点 9” 文 件 能 够 适 配 安里 平台 多 种 分 辨 率 以 及 屏幕 等 级 的 手机 。 其 最 大 特点 是 将 该 图 


的 模 同和 纵 问 按照 黑 扣 的 标注 随意 进行 拉 伸 ， 从 而 保留 像 系 的 精细 度 、 细 节 以 及 圆 角 的 大 小 


和 质量 ， 实 现 多 分 辨 率 下 的 完美 显示 效 末 ， 同 时 减少 不 必要 的 图 片 资源 。 
图 7-31 中 ， 上 面 和 左边 的 黑 把 ， 代 表 的 是 该 文件 在 模 同 和 纵 同 进行 延展 时 所 需要 延展 系 材 


图 7-30 3 


处 理 点 9 文件 的 方法 有 很 多 ， 有 个 专门 用 来 处 理 点 9 文件 的 工具 叫做 “draw9patch”， 但 
是 有 些 设计 师 也 会 直接 在 Photoshop 里 面 用 铅笔 标注 1 像素 黑 线 或 把 进行 展现 ， 并 且 在 输出 
PNG 文件 后 ， 在 命名 的 里 面 加 入 “.9” 即 可 进行 使 用 。 除 了 以 上 两 种 方法 之 外 ， 设 计 师 也 可 
以 使 用 各 种 切 图 软件 或 者 插件 来 进行 处 理 ， 例 如 “Cutterman ”这 样 的 切 图 插件 基本 上 都 会 文 
持 扣 9 文件 的 处 理 。 


2. 关于 切片 的 输出 格式 
最 后 来 介绍 对 切 图 的 输出 格式 有 哪些 要 求 ， 在 输出 的 时 候 主 要 是 以 PNG 24、PNG 8、 
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JPG 这 几 种 格式 为 主 。 如 果 JPG 和 PNG 两 种 格式 图 片 大 小 相差 不 是 很 大 的 情况 下 ， 推 存 使 
用 PNG 格式 的 文件 ， 因 为 PNG 格式 支持 背景 透明 的 效果 ; 如 果 图 片 质量 或 者 大 小 相关 很 大 


的 话 使 用 JPG 格式 ， 可 以 保证 开发 后 的 视觉 效果 不 失真 。 
对 于 引导 页 、 图 标 、 按 钮 以 及 各 种 功能 控件 建议 使 用 PNG 格式 ， 在 PNG 格式 中 最 好 是 
用 png24 位 模式 ， 因 为 其 所 包含 和 展示 的 颜色 会 更 加 丰富 ， 文 件 质 量 会 更 好 。 


在 这 一 节 当 中 要 重点 介绍 在 设计 和 开发 移动 闯 界 面 和 产品 的 过 程 中 进行 图 形 和 控件 元 素 
的 适 配 的 工作 流程 以 及 方法 。 

设计 师 为 什么 要 适 配 ? 主要 是 因为 现 有 的 手机 市 场 当 中 ， 手 机 屏幕 的 规格 和 尺寸 存在 人 碎 
记 化 的 现象 。 首 先 以 平 果 手机 为 例 ， 毕 末 手 机 ， 存 在 很 多 版 本 ， 从 最 新 的 iPhone 7 以 及 
iPhone 7plus， 再 到 之 前 的 iPhone 6 系列 、iPhone 5 系列 ， 在 这 些 机 型 中 ， 它 们 的 屏幕 等 级 的 
倍率 主要 是 以 2 倍 屏 萌 等 级 和 3 倍 屏 幕 等 级 两 。 而 对 于 安 早 来 说 的 话 ， 它 的 手机 品牌 和 手机 
机 型 的 碎 斤 化 更 加 严重 ， 主 要 也 是 由 于 安里 系统 代码 开源 的 原因 造成 〈 图 7-32)。 


iPhone 519 iPhone 6 iPhone 6 Plus 
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当 设 计 师 在 设计 页 面 视觉 效果 时 ， 通 沼 只 是 按照 一 种 尺寸 来 进行 设计 ， 使 用 的 单位 为 
pxX。 那 么 ， 如 何 能 够 让 我 们 设计 的 视 澳 效果 图 在 不 同 的 屏 副 中 都 可 以 正常 显示 呢 ? 


71.41 像素 的 概念 
屏幕 是 由 很 多 正方 形 的 像素 点 组 成 。 各 种 手机 设备 的 分 辩 率 都 是 手机 屏幕 中 所 包含 的 实 


际 像素 数量 。 例 如 750x1334px 的 屏幕 ， 就 是 由 750x1334 个 像素 点 构成 的 ， 我 们 看 到 的 屏幕 
成 像 画 面 就 是 由 不 同 的 像素 点 依次 发 光 而 形成 的 〈 图 7-33 )。 
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此 外 ， 屏 幕 的 物理 斥 寸 和 分 辨 率 也 不 是 绝对 成 比例 的 。 例 如 ，iPhone 3GS 的 屏幕 像素 是 
320x480px，iPhone 4s 的 屏幕 像素 是 640x960px， 然 而 两 款 手 机 都 是 3.5 英寸 的 物理 尺寸 。 
在 设计 产品 界面 的 时 候 ， 设 计 师 往往 要 垦 求 像 系 级 别 的 完美 ， 工 程 师 也 要 通过 像 系 来 进行 元 
素 的 定位 。 


7.4.2 像素 密度 及 屏幕 倍率 


通过 上 文 的 介绍 ， 我 们 可 以 友 现 ， 实 际 像 系 数量 和 屏 舌 的 物理 尺寸 古 没 有 和 直接 关系 的 ， 
那么 在 产品 开发 与 设计 的 时 候 就 需要 通过 一 个 桥架 能 够 让 这 两 个 指标 连接 在 一 起 。 这 里 瓯 需 
要 引入 一 个 新 的 单位 ， 也 就 是 PPI， 它 是 Pixels Per Inch 的 缩写 ， 我 们 通常 称 之 为 “像素 密 
度 ”。PPI 有 具体 是 指 一 类 寸 屏 医 中 所 包含 的 像素 数量 。 “像素 密度 ”的 概念 成 为 连接 分 辨认 和 
物理 尺寸 的 桥架 。 也 残 是 说 ， 屏 幕 的 “像素 密度 ”是 屏幕 的 物理 尺寸 以 及 分 辨 率 共 同 诀 定 
的 。 例 如 ，iPhone 3gs 和 iPhone 4s (图 7-34、7-35)。 


7-34 iPhone 3gs 7-35 iPhone 4s 
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iPhone 3gs 的 分 辨 率 为 320x480pX， 其 屏幕 的 物理 尺寸 为 3.53 瑞 寸 ， 而 iPhone 4s 的 屏幕 物 
理 尺 寸 为 3.5 英寸 ， 而 分 辨 率 成 了 640x960px， 比 之 前 整整 扩大 2 倍 。 同 样 都 是 3.5 英寸 的 屏 
幕 ， 可 以 明显 的 发 现 iPhone 4s 的 分 辩 靳 ， 也 束 是 像素 数量 会 更 多 ， 那 么 iPhone 4s 屏幕 的 “ 像 
系 密 度 ” 耽 会 更 大 。 那 么 ， 这 会 给 屏 疾 市 来 哪些 影响 呢 ? 如 图 7-36 所 示 。 


iPhone 49 iPhone 4s 
7-36 


通过 图 7-36 我 们 可 以 看 到 ， 对 于 iPhone 4s 的 Retina 屏幕 来 说 ， 在 当前 屏幕 中 所 展示 的 
每 一 个 控件 所 需要 的 像素 数量 要 比 iPhone 3gs 更 多 ， 上 所 以 iPhone 4s 屏幕 显示 的 清晰 度 也 要 
比 之 前 iPhone 3GS 的 屏幕 要 更 清晰 ， 视 觉 效 果 也 会 更 好 。 

对 于 之 前 的 iPhone 3GS 来 襄 ，iOS 系统 应 用 的 切 图 输出 物 中 ， 设 计 师 会 直接 使 用 按照 
320x480px 设计 的 效果 图 进行 切 图 并 使 用 。 后 来 随 厦 Retina 屏 医 的 出 现 ， 设 计 师 通 第 会 在 之 
前 按照 iPhone 3GS 的 分 辨识 进行 设计 的 控件 尺寸 基础 上 乘 以 2 得 到 可 以 在 Retina 屏 才 中 使 
用 的 切 图 输出 物 ， 其 文件 名 有 的 后 级 带 @2x 的 字样 。 所 以 ， 设 计 师 需要 按照 不 同 的 屏幕 等 级 
进行 切 图 得 出 物 尺 寸 的 处 理 并 且 正 确 的 命名 。 只 需要 把 切 图 输出 物 准 备 好 ， 在 开发 过 程 中 ， 
X-code 会 目 己 判断 调 取 相 对 应 的 切 网 使 用 ， 对 于 安 音 系统 的 道理 也 是 一 样 的 。 

所 以 ， 昔 果 以 iPhone 3GS 的 普通 屏 为 基准 ， 为 Retina 屏 定义 了 一 个 2 倍 的 倍率 ， 带 有 
@2x 的 切 网 现在 敌 闸 了 多 数 的 笠 果 手机 屏幕 ， 例 如 iPhone 4 系列 ，iPhone 5 系列 ，iPhone 6 
系列 和 iPhone 7 都 使 用 2 倍 疼 来 开发 。 对 于 iPhone 6plus，iPhone 7plus， 则 需要 使 用 带 有 
@3x 后 级 的 切 图 ， 并 且 在 之 前 的 2 倍 切 图 的 基础 之 上 将 其 尺寸 扩大 1.5 倍 才 可 适 配 iPhone 各 
种 plus 版 本 。 

那么 所 看 到 的 @2x，@3x 当中 的 2 和 3 代表 的 束 是 当前 屏 磊 的 倍率 ， 倍 率 是 衡量 屏 大 等 
级 中 非常 重要 的 标准 ， 也 是 在 适 配 过 程 中 必须 要 研究 的 一 个 环 市 。 

由 于 iPhone 3GS 现在 已 经 淘汰 ， 所 以 设计 师 在 针对 iOS 系统 进行 产品 设计 时 ， 只 需要 
处 理 两 套 切 图 即 可 ， 一 套 是 2 倍 图 ， 切 图 的 命名 后 级 须 加 入 @2x， 一 套 是 3 倍 图 ， 切 图 的 命 
名 后 级 须 加 入 @3x， 并 且 在 之 前 2 倍 图 的 基础 上 扩大 1.5 倍 即 可 。 


7.4.3 ” 安 早 的 适 配 诛 则 


对 于 安 卓 系统 当中 的 屏幕 适 配 其 实 道理 和 iOS 系统 相同 ， 但 是 会 更 麻烦 一 些 。 由 于 安 卓 
系统 的 开源 特点 ， 造 成 了 市 场 中 安 音 的 手机 品牌 和 屏幕 尺寸 伴 刻 化 严重 ， 其 分 辨 京 局 低 跨 度 
非常 大 ， 从 之 前 的 800x480px 再 到 现今 的 2K 屏幕 以 及 4K 屏幕 。 针 对 这 种 情况 ， 安 章 把 各 
种 设备 的 按照 像 妹 密度 的 高 低 划 成 了 几 个 范围 ， 并 且 各 个 范围 的 设备 屏 医 也 具备 不同 的 屏 畴 
倍率 ， 来 你 证 其 显示 效果 能 更 加 相近 ， 方 便 设 计 师 进行 切 图 处 理 。 其 实 当 我 们 针对 现 有 的 安 
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表面 设计 的 后 续 工 作 
于 手机 不 同 的 屏幕 等 级 处 理 出 相对 应 的 切 网 来 进行 适 配 ， 理 论 上 就 可 以 履 盖 几乎 全 部 的 手机 
屏幕 ， 以 保证 其 开发 后 的 显示 效果 《图 7-37)。 


屏幕 大 小 低 密度 【 120 】idpi 中 香 志 大 ( 160 ) mdpi 高 密度 ( 240 ) hdpi 
小 屏幕 OVGA ( 240x320 1 480x640 
普通 屏幕 WOVGAAO0 ( 240x400 ) WVGAS00 490*800 ) 


WOVGA432 ( 240x432 ) HVGA ( 320x480 ) ee E00 


WVGABOO * ( 480%800 } 


大 屏幕 TE | WVYGABS4 * {480x854 ) 
万 友 屏 臣 1024x 768 1280% 7 GA 1536x1152 1920x1152 1920 
SN (1280x800 ) 


d= 


像素 密度 在 120 左右 的 屏幕 属于 ldpi，160 左右 的 属于 mdpi， 由 此 进行 类 推 ， 所 有 的 安 
齐 屏 幕 等 级 都 可 以 找到 自己 的 位 置 ， 并 且 可 以 查询 其 相应 的 倍率 来 进行 适 配 。 

其 相对 应 的 屏幕 倍率 如 下 : 

@ ldpi 的 倍率 为 0.75 倍 ， 已 淘汰 ; 

@ mdpi 的 倍率 为 1 倍 ， 以 320x480 分 辩 率 为 代表 ; 


@ hdpi 的 倍率 为 1.5 倍 ， 以 480x800 分 辨 率 为 代表 ; 

@ xhdpi 的 倍率 为 2 倍 ， 以 640x960 分 辨 率 为 代表 ; 

@ xxhdpi 的 倍率 为 3 倍 ， 以 1080x1920 分 辩 率 为 代表 ; 

@ xxxhdpi 的 倍率 为 4 倍 ， 以 2560x1440 分 辨识 为 代表 。 

根据 屏幕 的 倍率 和 等 级 ， 像 素 密 度 更 高 或 者 更 低 的 设备 ， 只 需 乘 以 相应 的 倍率 ， 就 能 得 


到 与 基准 倍率 近似 的 显示 效果 (图 7-38 )。 


OHDP! | "HOP 
X4 x3 x2 
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一 一 视觉 营造 的 风向 标 

依照 现 有 手机 市 场 当 中 分 辨识 的 市 场 占有 率 来 看 ， 主 要 以 xhdpi，xxhdpi，xxxhdpi 这 三 
个 屏幕 等 级 为 主 ， 所 以 只 需要 重点 关注 这 三 个 屏幕 等 级 进行 延展 即 可 。 

例如 在 xhdpi 的 屏幕 等 级 中 做 了 一 个 50x50px 的 图 标 ， 那 么 只 需要 在 其 基础 上 分 别 扩大 
1.5 倍 和 2 倍 便 可 得 到 适 配 在 xxhdpi，xxxhdpi 的 图 标的 具体 尺寸 。 

而 且 ， 由 于 iPhone 手机 的 750x1334 的 屏幕 等 级 和 安里 手机 的 720x1280 的 屏 大 等 级 
是 一 臻 的 ， 所 以 按照 750x1334 进行 设计 之 后 的 设计 效果 图 可 以 直接 使 用 到 720x1280 的 
设备 中 。 


17.4.4 ”逻辑 像素 


在 不 同 的 屏 硕 等 级 面前 ， 实 际 像 系 会 显得 非常 不 可 徘 。 比 如 ， 妆 设计 师 在 一 个 屏 舌 等 级 
中 设计 了 一 球 图 标 ， 那 么 很 有 可 能 按照 这 个 图 标的 实际 像 双 尺寸 放 到 其 他 的 屏幕 等 级 中 就 会 
显得 不 合适 。 所 以 在 开发 的 过 程 中 ， 工 程 师 需 要 寻求 一 个 可 以 在 各 个 不 同 屏 大 等 级 中 都 能 够 
恒定 的 单位 ， 所 以 就 出 现 了 我 们 所 提 到 的 “过 辑 像 系 ”。 

不 难 发 现 真 正 决定 显示 效 来 的 其 实 是 逻辑 像素 尺寸 ， 在 iOS 和 安 时 系统 中 都 定义 了 各 目 
的 逻辑 像 系 单位 。 

iOS 系统 当中 逻辑 像素 的 单位 是 pt， 安 时 系统 当中 逻辑 像素 的 单位 是 dp， 两 者 其 实 是 一 
回 事 ， 只 是 在 不 同 的 平台 中 的 称呼 不 同 。 

邮 辑 像素 与 实际 像 际 之 间 的 转化 可 以 概括 为 : 

实际 像素 = 逻辑 像素 x 倍 率 

所 以 ， 风 辑 像 系 转化 为 实际 像 系 主要 是 由 屏 阁 等 级 相对 应 的 倍率 所 决定 的 。 我 们 可 以 来 
看 一 下 各 个 不 同 屏 关 等 级 的 侯 辑 像 系 与 实际 像素 之 间 的 转化 结 末 。 

@ mdpi 当中 1dp=1lpt=1px; 

@ hdpi 当中 ldp=1pt=1.5px:; 

@ xhdpi 当中 1dp=1pt=2px; 

@ xxhdpi 当中 ldp=1pt=3px; 

@ xxxhdpi 当中 ldp=1pt=4px。 

所 以 ， 逻 辑 像 系 与 实际 像 系 之 则 的 转化 是 由 不 同 屏 秦 等 级 的 倍率 所 决定 的 。 例 如 : 安 时 
最 小 的 点 击 区 域 为 48x48dp， 那 么 在 不 同窗 度 的 屏蔽 中 ， 其 像 系 大 小 也 不 一 样 。 

在 xhdpi 中 的 倍率 是 2 倍 ， 所 以 ， 在 当前 的 屏幕 等 级 中 1 个 逻辑 像素 可 以 兑换 2 个 实际 
像素 ， 所 以 其 实际 像素 为 96x96px。 

在 xxhdpi 中 的 倍 识 是 3 倍 ， 所 以 ， 在 当前 的 屏 舌 等 级 中 1 个 逻辑 像素 可 以 部 换 3 个 实 
际 像 系 ， 所 以 其 实际 像素 为 144x144px。 

无 论 是 在 规范 性 说 明文 档 的 制作 还 是 与 工程 师 进 行 日 常 沟 通 中 最 好 都 古 使 用 单位 为 逻辑 
像素 来 展开 ， 同 时 也 是 为 了 保证 产品 设计 与 开 及 的 高 效 以 及 建立 起 设计 师 与 工程 师 之 间 沟 通 
的 桥梁 。 
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8.1 手绘 插画 的 世界 
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一 一 视觉 营造 的 风向 标 
8.1 手绘 插 男 的 世人 


作为 传统 的 绘画 形式 ， 手 绘 一 直 有 着 独特 的 魅力 。 擅 长 手绘 的 设计 师 不 仅 能 够 在 设计 的 
过 程 中 快速 捕 提 心 中 所 想 的 图 形 并 准确 描绘 出 来 ， 还 能 在 长 期 的 手绘 中 提升 自己 对 线条 和 色 
彩 的 理解 ， 这 些 最 原始 的 理解 会 像 雨 露 游 养 小 草 一 样 ， 润 物 细 无 声 ， 但 回头 发 现 自 己 已 经 站 
在 了 更 高 的 山峰 。 手 绘 是 最 自然 的 流露 ， 相 比 用 计算 机 合成 的 图 片 ， 它 更 真实 ， 更 能 够 直击 
心灵 。 

现代 的 设计 师 越 来 越 多 的 通过 手绘 板 与 传统 的 绘画 方式 结合 ， 将 作品 运用 到 视觉 设计 的 
各 个 方面 ， 其 主要 表现 方式 有 插画 与 原画 。 


8.1.1 关于 插画 


作为 视觉 传达 的 一 种 表现 形式 ， 插 画 一 直 是 很 多 设计 师 的 偏爱 ， 尤 其 在 儿童 类 视觉 设计 
中 插画 可 请 有 着 得 天 独 厚 的 优势 。 插 画 的 表现 方式 自由 ， 男 面 往往 极 襄 冲击 力 与 表现 力 ， 能 
快速 抓 住 观 者 眼球 又 不 失 美感 。 

插 国 师 们 一 般 都 有 痢 很 强 的 个 人 风格 ， 或 艳丽 或 肃穆 或 简洁 或 本 杂 ， 总 之 日 化 齐 放 。 由 
于 表现 方式 更 加 灵活 目 由 ， 所 以 创作 者 们 永远 不 满足 现 有 的 表现 方式 ， 总 会 努力 挖掘 绘图 软 
件 的 潜力 ， 来 达到 想 要 有 的 效果 (图 8-1)。 


1. 基础 
很 多 人 认为 插画 风格 另类 ， 有 些 甚 至 毫 无 章法 只 是 单纯 的 好 看 ， 就 觉得 插画 其 实 不 需要 


基础 也 可 以 男 好 。 这 样 的 观点 对 于 初学 者 来 次 是 危险 的 。 美 术 的 基础 区 是 我 们 男 插 男 的 根 
基 ， 对 一 张 作 品 的 认识 高 度 是 由 个 人 的 美术 基础 所 决定 ， 对 绘画 的 认识 的 重要 性 其 实 就 像 是 
在 迷宫 中 的 地 图 ， 在 大 海中 的 灯塔 一 样 重要 ， 让 我 们 在 绘画 中 页 见 各 种 疑惑 后 能 通过 之 前 所 
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视觉 设计 师 的 扩展 技能 一 一 手绘 插画 
学 到 的 基础 、 依 据 去 解决 问题 。 基 础 是 学 不 完 的 ， 这 点 一 定 要 反复 强调 ， 因 为 基本 功 的 扎实 


程度 才 是 决定 你 能 走 多 远 的 关键 (图 8-2)。 


2. 风格 


表现 方式 ， 从 而 一 步 步 确立 ， 一 步 步 完 善 起 来 的 。 风 格 是 不 可 能 一 步 到 位 的 ， 那 些 大 师 往 往 
一 替 了 于 都 在 不 停 的 答 试 各 种 风格 ， 固 定 的 风格 其 实 更 多 是 工作 的 需要 ， 多 位 试 不 同 的 风格 才 
能 发 现 目 己 的 闪光 点 与 不 足 ， 而 无 论 什 么 风格 ， 都 是 以 基础 为 文 撑 的 。 

3. 临摹 

绘 男 的 初学 者 是 远 不 开 临 拿 的 ， 临 侈 不 是 照看 别人 的 画 再 夯 一 次 ， 而 古 将 别人 已 有 经 验 
拿 来 学 习 借 鉴 。 学 习 别 人 的 构图 ， 学 习 列 人 的 配色 ， 学 习 刚 人 的 笔触 或 排 线 ， 这 是 手 给 插画 
水 平 进步 的 关键 。 很 多 人 不 悄 于 临 侈 ， 觉 得 临 敬 是 低 端 的， 会 阻碍 目 己 的 创造 力 ， 其 实 不 
然 。 首 先 ， 临 侈 与 吾 都 古 学 习 的 一 部 分 ， 只 要 是 在 训练 ， 意 义 全 部 在 于 过 程 中 是 侍 带 着 解决 
问题 的 目的 去 进行 。 临 人 敬 是 学 习 列 人 如 何 解决 问题 的 过 程 ， 目 己 画 则 是 上 自己 去 寻找 解决 问题 
的 途径 ， 两 者 部 是 学 习 。 欧 洲 绘画 的 传统 和 传承 为 什么 从 未 断 过 ? 残 是 因为 临 擎 式 的 学 习 是 
他 们 的 传统 。 


8.1.2 ”游戏 姬 的 重要 性 


互联 网 的 快速 肥 展 让 UI 已 经 无 所 个 入 了 ， 游 戏 行业 当然 也 不 例外 。 而 且 游 戏 UI 风格 越 
来 越 多 样 化 ， 精 美的 程度 也 越 来 越 蜗 。 当 然 游 戏 UI 的 起 初 阶段 其 实 也 是 有 过 曲折 ， 早 期 人 
们 并 不 太 重 视 UI 在 游戏 中 的 地 位 ， 甚 至 很 长 的 时 间 里 都 没有 专门 的 游戏 UI 设计 师 ， 大 多 都 
古 程 序 员 目 己 或 者 一 些 可 可 怪 怪 的 人 做 的 “图 8-3)。 
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随 痢 洲 戏 产业 高 速 增长 ， 大 量 的 游戏 产品 井喷 式 保 及， 人 们 的 口味 也 变 得 越 来 越 挑剔 。 
所 以 对 游戏 质量 的 要 求 也 就 蝇 了 ，UI 就 不 得 不 引起 人 们 重视 了。 毕竟 UI 是 用 户 直 接 可 以 看 
到 地 方 ， 大 多 数 玩家 都 是 先 看 游戏 夯 面 的 。 那 么 什么 是 游戏 UI? 制作 游戏 UI 又 有 那些 要 
求 ? 一 个 个 精致 的 游戏 UI 是 如 何 一 步 步 从 无 到 有 做 出 来 的 ? 


8.2 ”游戏 UI 设计 


简单 地 说 游戏 UI 是 边框 、 按 钮 、 图 标 之 类 的 是 很 片面 的 ， 因 为 UI 离 不 开交 互 ， 游 戏 
UI 也 是 ， 其 实在 设计 之 初 首先 去 思考 的 也 应 是 如 何 让 玩家 使 用 会 更 加 顺手 ， 更 加 简单 直 
观 ， 毕 葛 没 有 人 愿意 看 见 目 己 的 游戏 界面 跟 电 路 图 一 样 复 人 杂 。 当 然 一 些 游戏 公司 可 能 在 版 式 
的 排列 与 交互 方面 涉及 较 少 ， 但 是 设计 的 UI 中 的 识别 性 与 风格 的 统一 性 等 因素 就 需要 游戏 
UI 设计 师 去 进行 把 控 了 。 所 以 这 么 看 来 游戏 UI 就 是 负责 帮助 玩家 与 游戏 之 间 进 行 交 互 的 地 
方 ， 还 需 根据 游戏 的 需求 进行 美化 。 


8.2.1 洲 戏 三 的 概念 


图 标 : 游戏 的 ICON (图 形 标 志 )， 游 戏 中 所 使 用 的 过 具 的 图 片 、 技 能 的 图 厂 、 一 些 徽章 
等 都 属于 图 标 ， 这 些 图 标 一 般 部 是 用 手绘 板 绘 制 ， 制 作 的 过 程 往往 与 传统 绘画 类 似 。 道 具 往 
往 造 型 明显 ， 而 徽章 往往 细节 较 多 ， 层 次 分 明 ， 有 很 强 的 设计 感 与 质感 图 8-4)。 
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边框 和 按钮 ， 是 经 常 跟 玩 家 “打交道 ”的 一 部 分 ， 往 往 比较 严谨 整洁 ， 但 并 不 单调 。 经 
常用 金属 、 木 头 、 水 晶 等 材质 来 表现 ， 当 然 一 般 会 根据 项 目的 需求 出 现 一 些 按钮 需要 有 选 


中 、 揽 下、 正常、 解锁 等 效果 的 制作 ， 制 作 时 往往 在 原 有 图 标的 基础 之 上 对 色彩 饱和 、 明 度 
等 进行 调节 (图 8-5)。 


8—5 


LOGO: 是 游戏 的 招 脾 。 往 往 造 型 会 夸张 一 些 ， 字 体会 有 较 大 的 变形 ， 一 般 部 配 有 精致 
的 边框 或 者 确 衬 再 适当 加 一 些 魔 法 效 末 ， 为 的 就 是 突出 “ 炫 ” 游戏 的 LOGO 设计 一 般 部 是 
资深 设计 师 完 成 ， 毕 苋 是 很 重要 的 任务 ， 所 以 要 求 也 相当 苛刻 ， 完 成 度 相对 很 咒 ( 图 8-6)。 


8.2.2 ”绘制 游戏 焉 的 要 求 


如 今 随 春 游戏 的 质量 越 来 越 启 ， 种 关 越 来 越 楷 多 ， 风 格 也 越 来 越 多 样 ， 所 以 对 UI 的 要 
求 会 越 来 越 苛刻 。 


195 


移动 界面 设计 


一 一 视觉 营造 的 风向 标 

1. 精致 度 

这 是 一 个 非常 重要 的 也 是 基本 的 要 求 ， 毕 竟 游 戏 UI 是 直接 呈现 给 玩家 的 部 分 ， 所 以 一 
款 游 戏 的 制作 水 平 很 大 程度 上 取决 于 游戏 画面 的 精致 程度 。 所 以 设计 者 们 往往 会 花费 大 量 的 
时 间 与 精力 在 后 期 去 完善 自己 的 作品 ， 争 取 处 理 好 每 一 个 细节 。 精 致 的 细节 不 仅 考验 着 设计 
者 的 功力 ， 也 考验 着 设计 者 的 毅力 。 因 为 很 多 初学 者 容易 虎 头 蛇 尾 或 者 画 到 一 定 程 度 就 不 知 
道 该 如 何 进行 下 去 了 ， 所 以 作画 过 程 应 保持 平心静气 ， 避 免 浮 躁 ， 不 断 去 强化 自己 的 绘画 能 
力 。 当 然 ， 强 大 的 绘画 能 力 是 以 强大 的 整体 把 控 能 力 为 前 提 的 ， 不 是 所 有 的 地 方 都 要 画 完 
整 ， 有 时 候 一 些 次 要 的 地 方 应 故意 处 理 弱 一 些 ， 以 强化 主体 部 分 〈 图 8-7)。 


Pe 和 


8-7 ”懂得 繁 简 对 比 会 让 画面 更 加 生动 


2. 辨识 度 

将 文字 化 的 内 容 图 形 化 是 UI 设计 经 常 做 的 事情 ， 无 非 是 让 画面 达到 更 加 直观 与 美观 的 
目的 。 所 以 要 注意 这 个 工作 不 能 与 这 些 最 初 的 目的 背道而驰 。 那 么 这 些 放 到 游戏 设计 中 如 何 
解释 呢 ? 比如 制作 一 个 道具 宝剑 ， 需 求 中 给 设计 师 去 放置 这 个 道具 的 尺寸 是 十 分 有 限 的 ， 如 
何 能 在 很 小 的 框 中 明显 看 出 所 绘制 的 是 什么 ， 就 考验 到 设计 师 的 功力 了 。 所 以 设计 师 经 常 得 
适当 地 概括 造型 ， 并 用 加 强 明暗 对 比 ， 让 主体 与 背景 更 加 区 分 开 等 方式 来 让 观 者 一 目 了 然 ， 
并 有 旦 需要 避免 一 些 图 标 过 于 相似 ， 不 然 会 容易 让 玩家 点 错 (图 8-8)。 


DD。. 
伊 。. 


图 8-8 ”不同 尺寸 中 确保 绘制 的 内 容 清晰 易 关 
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视觉 设计 师 的 扩展 技能 
3. 构图 
这 里 单独 拿 来 说 古 因为 初学 者 太 容易 在 这 个 问题 上 犯错 误 。 在 绘制 的 开始 ， 束 应 该 考虑 
构图 ， 因 为 绘制 的 道具 或 者 技能 部 是 放 在 规定 的 框 中 ， 所 以 太 大 、 太 小 、 太 偏 ， 部 要 避免 。 
并 且 在 做 一 些 边框 按钮 的 时 候 ， 对 对 齐 ， 尺 寸 的 统一 与 位 置 择 放 统 一 性 的 考虑 要 变 成 一 种 本 
能 ， 不 能 有 任何 马虎 。 这 样 ， 界 面 才 会 看 起 来 整齐 并 有 理 有 据 《“ 如 网 8-9)。 


图 8-9 技能 图 标 在 构图 中 的 体现 


4. 风格 

游戏 风格 的 种 类 非常 多 ， 很 多 时 候 的 区 别 又 非常 微妙 ， 不 易 把 探 。 听 到 最 难 回答 的 问题 
就 是 ， 这 是 什么 风格 ?其 实 游 戏 的 风格 有 时 候 真 的 不 是 用 语言 能 描述 准确 的 ， 更 多 是 一 种 主 
观感 受 。 现 在 的 游戏 经 常会 将 很 多 元 系 混 到 一 个 世界 观 里 ， 不 仪 会 有 非常 浓郁 的 色彩 ， 也 会 
出 现 极 为 复 林 的 细节 ， 只 能 很 笼统 地 划分 成 写实 、Q 版 、 欧 美 、 中 国 、 上 古代、 现代 等 ， 比 如 
说 《梦幻 西游 》 属 于 Q 版 仙 侠 中 国 风格 ， 那 么 《CE》 融 属于 现代 写实 类 ， 但 像 《 魔 兽 世 
界 》 你 束 很 难说 出 它 是 写实 还 是 卡通 ， 因 为 两 者 的 特点 它 都 有 。 在 设计 时 如 果 想 做 出 规定 项 
目的 风格 ， 不 妨 试 试 观 察 下 面 几 点 : 

a) 线 稿 。 这 是 一 个 很 明显 的 特点 ， 不 仅 要 确定 有 无 线 稿 ， 还 要 去 观察 线 稿 的 粗细 ， 粗 
细 有 无 变化 ， 有 无 闫 色 等 。 往 往 卡 通风 格 的 游戏 会 你 留 线 稻 ， 写 实 风 格 则 没有 或 者 不 明显 
(如 图 8-10)。 


图 8-10 
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b) 色彩 。 不 同 游戏 中 色彩 饱和 度 是 不 同 的 ， 有 的 游戏 看 起 来 色彩 明快 ， 有 的 看 起 来 阴 
郁 ， 有 的 看 起 来 温暖 ， 有 的 看 起 来 阴冷 。 如 图 8-11 左上 的 《RUBBER TACOS》 是 一 款 适 合 
儿童 玩 的 游戏 ， 所 以 整个 画面 看 起 来 色彩 饱和 度 比较 高 ， 颜 色 比 较 丰 富 ， 加 上 可 爱 简 化 的 造 
型 十 分 讨 孩 子 们 的 喜爱 。 图 8-11 右上 的 《 太 改 达 人 》 是 一 丈 适 合 年 轻 人 玩 的 休闲 类 游戏 ， 
整个 画面 也 用 了 比较 高 的 饱和 度 与 比较 暖 的 颜色 来 突出 轻松 欢乐 与 热烈 的 气氛 ， 让 人 感觉 
以 通过 这 个 游戏 放松 心情 。 图 8-11 左下 的 《TEMPLE OF GLORY》 的 颜色 饱和 度 低 一 些 ， 
各 种 颜色 的 搭配 也 更 加 和 柔和， 看 起 来 比较 成 就 沉稳 、 适 合 年 轻 人 但 游戏 气氛 偏 严 肃 的 游戏 。 
图 8-11 右 下 的 《 血 源 诅咒 》 的 色彩 饱和 度 更 低 ， 颜 色 更 贴近 真实 ， 是 一 款 比 较 信 写实 类 、 
暗黑 类 的 游戏 ， 伺 暗 信 冷 的 色调 会 让 人 有 些 看 不 清 的 感觉 ， 从 而 加 强 玩 家 的 候 惧 感 ， 也 演 染 
了 一 种 危机 四 伏 的 感觉 。 所 以 说 不 同 的 色彩 搭配 会 给 人 不 同 的 感觉 。 


i ot 
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c) 比例 ， 或 者 说 是 众 张 度 。 可 以 类 比 成 角色 中 的 头号 比 ， 比 如 三 头 吴 就 会 亚 得 很 Q， 
如 《超级 与 里 奥 》《 部 落 冲 突 》《 植 物 大 战 僵 己 》， 八 尖 旱 就 会 显得 很 写实 ， 如 说 《GTA5》 
《 洛 奇 英雄 传 》《 暗 黑 之 魂 系列 》。 换 到 游戏 UI 中 的 道具 中 也 是 ， 往 往 越 是 夸张 的 风格 ， 他 们 
的 比例 都 会 显得 很 从 张 。 越 是 与 实 的 风格 ， 他 们 的 比例 越 是 靠近 现实 的 比例 〈 图 8-12)。 


8-12 
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d) 精度 ， 或 者 复杂 程度 。 往 往 越 是 写实 ， 所 绘制 的 细节 会 相对 越 多 ， 比 如 《战神 系列 》 

《使 命 召唤 系列 》。 越 是 简单 ， 所 绘制 的 细节 越 是 概括 ， 比 如 《 尾 经 的 小 乌 》《 艾 尔 之 区》， 绘 

制 的 精致 度 与 复杂 程度 不 同 所 体现 的 风格 也 不 相同 。 当 然 还 有 很 多 细节 ， 比 如 年 代 ， 是 合 存 
在 魔法 ， 线 条 软 硬 等 。( 图 8-13、8-14)。 


8-14 
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8.3 ”手绘 插画 设计 着 戏 UI 


8.3.1 绘制 池 戏 三 的 工具 


1. 传统 绘画 工具 

传统 绘画 是 很 重要 的 绘画 工具 ， 其 绘制 过 程 一 般 是 在 本 子 上 画 出 其 线 稿 ， 再 将 线 稿 扫 
描 ， 或 者 拍照 的 方式 导入 计算 机 中 ， 进 行 提 线 以 及 下 一 步 的 绘制 。 

2， 数字 绘画 工具 

瓯 是 手绘 板 了 了， 那么 什么 是 手绘 板 ? 其 实 不 是 模拟 了 人 们 在 本 子 上 用 铅笔 绘画 的 感觉， 
让 人 们 在 使 用 的 过 程 中 能 够 运用 手写 笔 的 轻重 缓急 来 较真 实 的 呈现 出 他 们 想 要 的 效果 。 可 在 
红色 选 框 区 域内 选择 合适 的 笔 刷 (图 8-15 )。 


Te 
图 8-15 
手绘 板 的 缺点 在 于 需要 通过 一 些 时 间 来 进行 磨合 、 适 应 ， 而 且 携 带 不 方便 。 但 优点 就 多 


了 ， 比 如 结合 强大 的 PS 技术 将 涂改 变 得 极为 便捷 ， 并 且 灵 活 运用 PS 的 各 种 工具 能 做 出 很 多 
意 想 不 到 的 效果 。 而 且 不 会 在 涂改 的 过 程 中 让 画面 变 得 脏 乱 不 堪 。 还 有 就 是 色彩 的 选择 和 使 
用 变 得 相当 和 直观， 一般 直接 选择 适当 的 颜色 即 可 省 去 考虑 色彩 如 何 调和 的 过 程 ( 但 展 得 如 何 
调和 色彩 对 于 学 习 任 何 形 式 的 美术 部 是 必须 掌握 的 基础 )。 还 有 束 是 手绘 板 是 绘制 到 电脑 中 
的 ， 最 终 导 成 什么 样 的 格式 都 可 以 ， 而 传统 纸 上 的 绘制 想 要 叶 入 电脑 则 需要 通过 扫 揪 或 者 扣 
照 来 完成 。 

但 并 不 是 说 明 在 纸 上 绘 制 就 是 一 无 是 处 了 ， 其 实 很 多 PS 绘画 的 大 神 依 然 保 持 在 纸 上 绘 
男 的 习惯 ， 因 为 随时 都 能 掏 出 本 和 笔 进行 练习 ， 并 且 使 用 这 种 原始 的 笔 和 纸 来 捕捉 自己 丰富 
的 想象 力 的 方式 还 是 让 很 多 设计 师 收 荔 菲 浅 的 。 
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8.3.2 洲 戏 下 的 绘制 方法 以 及 案例 分 孚 


1， 宝剑 案例 

J 草图 : 当 拿 到 一 个 任务 ， 首 先 想到 的 束 是 需要 把 它 田 成 什么 样子 ， 这 时 束 需 要 去 找 
大 量 的 参考 进行 观 罕 分析。 关于 造型 可 以 从 盘 影 出 友 ， 注 意 牙 密 ， 轻 重 ， 避 免 太 多 重复 ， 要 
讲 完 珊 中 有 低 ， 低 中 有 高 ， 融 低 错 落 的 感觉 。 草 图 阶段 其 实 不 用 考虑 太 多 细节 ， 要 整体 把 控 
大 的 关系 ， 比 如 长 宽 比 ， 块 面 的 大 小 比 等 。 

Go 线 稳 : 是 一 幅 作 品 从 无 到 有 的 开始 ， 它 的 虚实 有 展 ， 玻 密 深 天 ， 张 籽 有 度 让 男 面 一 


线 稿 绘制 到 位 ， 不 要 着 急 进 入 下 一 阶段 。 好 的 线 稿 不 仅 能 够 体现 出 物体 的 造型 ， 其 至 能 表现 
出 物体 的 体积 、 明 上 暗 、 光 感 和 质感 。 所 以 线条 的 练习 对 于 每 一 位 设计 者 来 说 是 长 期 且 必 须 的 
训练 项 目 。 那 么 什么 样 的 线 是 我 们 所 追求 的 呢 ? 

一 般 画 线条 肯定 要 流畅 ， 线 稿 阶段 要 心平 气 和 ， 并 将 所 想 要 的 造型 构思 清楚 ， 避 人 免 急 躁 
和 犹 防 不 决 。 还 要 避免 画 线 时 一 样 的 粗 从 而 缺少 虚实 的 变化 。 一 般 可 以 用 很 轻 的 笔触 先 画 出 
大 的 框架 ， 确 定 了 基本 的 长 宽 比 、 斜 度 等 ， 再 用 稍 肯 定 的 线 进 行 更 具体 的 绘制 。 绘 制 过 程 中 
注意 多 多 观察 ， 多 多 比较 ， 造 型 能 力 的 提升 是 长 期 的 ， 一 定 不 要 短期 觉得 画 不 好 而 灰心 ， 只 
要 坚持 练习 就 会 及 现 目 己 的 进步 。 

用 线 稿 开 始 绘 制 是 一 个 很 好 的 绘画 方式 。 当 然 也 有 不 少 设计 者 习惯 用 色 块 开始 绘制 ， 也 
有 边线 稿 边 色 块 同时 开始 绘制 ， 其 实 都 没有 问题 。 只 是 直接 用 色 块 开始 的 设计 者 往往 经 过 了 
大 量 的 线 稿 练习 。 但 初学 者 的 话 还 是 建议 从 线 稿 开始 比较 好 ， 一 方面 能 够 练习 自己 的 线条 绘 
制 能 力 ， 另 一 方面 也 能 提升 自己 对 造型 的 理解 能 

草图 完成 后 可 以 用 橡皮 擦 淡 或 者 是 降低 该 图 层 的 透明 度 ， 再 提 一 次 线 稿 ， 这 次 会 更 加 准 
确 ， 更 加 流畅 些 。 多 余 的 线 可 以 用 橡皮 控 掉 ， 一 些 转折 的 部 分 可 以 处 理 的 相对 实 一 些 ， 一 些 平 
组 的 线 可 以 处 理 的 虚 一 些 ， 但 要 注意 线 与 线 之 间 的 闭合 问题 ， 不 要 画 的 线 稿 都 是 断断续续 的 。 

总 之 ， 线 稿 阶段 也 是 整个 绘画 的 基础 阶段 ， 所 以 多 花 一 些 时 间 会 让 之 后 的 绘制 少 走 一 些 
弯路 〈 图 8-16 )。 
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@) 上 色 : 当 线 稿 完成 后 就 要 考虑 上 色 了 。 首 先是 颜色 的 选择 ， 如 果 心 中 并 没有 很 明确 的 答 
案 可 以 考虑 去 找 找 参 考 (在 工作 过 程 中 一 定 要 学 会 找 参考 ， 多 去 观察 多 去 分 析 ， 达 到 为 我 所 用 
并 能 今后 掌握 的 效果 )。 之 后 ， 把 选 好 的 颜色 小 心 翼 翼 的 铺 在 之 前 绘制 的 线 稿 中 。 注 意 边缘 处 保 
持 干 净 ， 不 要 超出 来 ， 也 别 漏 涂 。 在 涂 的 过 程 中 可 以 尽量 平 涂 实 一 些 (方便 之 后 的 选区 ，(Alt) 
+ 右 击 图 层 就 能 选中 想 绘制 地 方 )。 还 有 就 是 要 注意 分 好 图 层 ， 跟 线 稿 图 层 分 开 来 画 以 方便 之 后 
的 修改 。 有 必要 的 话 也 可 以 将 线 稿 着 色 ， 着 色 后 的 线 稿 看 起 来 不 会 显得 那么 脏 。 

上 色 在 平 涂 阶 段 不 用 考虑 太 多 ， 只 要 注意 边缘 整齐 
就 好 ， 即 使 颜色 有 偏差 也 不 用 担心 ， 和 凭借 PS 强大 的 功 
能 ， 调 整 颜色 还 是 很 方便 的 〈( (Ctrit+U〉(Ctrlt+B〉 都 能 解 
决 ) (图 8-17)。 

@ 明暗 : 前面 的 阶段 是 单纯 标 出 了 所 绘制 的 一 个 
基本 色 也 称 固有 色 ， 但 并 没有 具体 的 体积 感 更 不 要 说 是 
质感 了 。 那 么 接 下 来 就 看 看 如 何 把 体积 感 做 出 来 。 

在 想 让 物体 立体 起 来 之 前 要 预 设 一 个 光源 。 选 择 一 
个 合适 的 位 置 并 且 设 置 一 个 光源 的 颜色 〈 一 般 都 是 偏 白 Fal 
的 冷光 或 者 暖 光 )， 并 且 设 想 一 下 光源 的 强 弱 。 当 确定 
了 光源 之 后 就 有 了 判断 亮 灰暗 的 前 提 。 

一 个 物体 想 表 现 出 它 的 体积 感 ， 那 么 三 大 面 五 大 调 人 
缺 一 不 可 。 所 以 在 绘制 的 时 候 时 刻 审视 一 下 自己 的 作品 这 些 调子 是 否 存在 ， 而 且 对 于 灰 度 的 
把 控 需要 大 量 而 长 期 的 练习 。 根 据 造型 与 光源 标 出 大 的 亮 灰 暗 关系 ， 并 完善 (图 8-18)。 
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细 化 : 当 基 本 的 明暗 关系 出 来 以 后 就 该 做 进一步 的 刻画 了 。 细 化 也 是 由 浅 到 深 的 过 
程 ， 所 以 尽量 不 要 一 开始 细 化 惑 抓 住 一 个 点 无 限 细 化 下 去 ， 而 全 然 不 顾 四 周 什么 都 还 没有 
呢 。 这 样 做 很 有 可 能 一 开始 把 所 有 的 激情 倾注 到 一 个 点 上 ， 回 过 头 来 及 现 ， 其 他 地 方 都 没 
男 ， 于 是 瞬间 和 觉得 工程 海 大 ， 没 有 信心 继续 深入 了 。 而 且 还 可 能 会 因为 只 是 在 局 部 的 绘制 ， 
没有 观察 整体 的 感觉 ， 所 以 就 会 出 现 许 许多 多 的 问题 ， 比 如 筷 了 整体 光源 造成 整个 画面 没有 
一 个 统一 的 光源 ， 还 有 透视 没有 整体 去 考虑 可 能 就 会 友 生 矛盾 空间 的 感觉 ， 再 有 束 是 腕 灰暗 
的 关系 可 能 也 不 统一 ， 走 形 、 色 彩 天 系 混乱 、 芷 密 不 得 当 等 问题 。 
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所 以 绘画 尽量 整体 出 发 ， 一 开始 还 是 不 要 把 东西 画 的 太 “ 明 确 ”， 可 能 一 些 不 确定 的 笔 
触 会 带 来 一 些 更 好 的 灵感 。 刻 画 前 期 尽量 保留 一 些 人 余地， 这样 在 最 后 点 睛 之 笔 中 把 一 些 关 键 
地 方 加 强 对 比 或 者 提出 高 光 会 相对 容易 ， 也 更 能 突出 视觉 中 心 。 

2. 需要 处 理 的 细节 

() 进一步 的 明确 面 与 面 之 间 的 关系 ， 束 是 之 前 可 能 模棱两可 的 面 需要 做 明确 。 比 如 说 
转折 锋利 的 面 可 能 就 需要 在 明暗 交界 线 的 位 置 进行 加 强 ， 转 折 比 较 光 滑 的 面 的 转折 可 能 我 们 
就 需要 把 这 个 对 比 减 弱 。 这 样 做 会 强化 我 们 所 绘制 的 物体 的 体积 感 。 

@) 调整 整体 亮 灰 暗 的 关系 ， 在 这 里 需要 注意 的 就 是 光源 的 强 弱 问题 了 。 如 果 是 强 光照 
射 ， 可 能 我 们 就 需要 提 亮 整体 明度 ， 如 果 是 在 弱 光 比如 阴 天 ， 束 需要 减弱 大 的 效果 中 亮 灰 蜡 
的 对 比 了 。 

(3) 调整 色彩 关系 或 者 添加 色彩 关系 ， 想 拉 开 整个 物体 的 空间 感 时 ， 就 要 想 办 法 去 将 前 
后 上 下 的 位 置 做 出 不 同 来 。 那 么 除了 亮 灰 上 暗 的 不 同 可 以 拉 开 空间 关系 ， 颜 色 也 是 拉 开 空间 关 
系 的 利器 ， 很 常见 的 就 是 用 冷暖 来 进行 拉 开 关系 。 亮 部 偏 冷 ， 暗 部 偏 暖 ， 或 者 暗部 偏 暖 ， 亮 
部 偏 冷 。 

由 材质 的 表现 ， 不 同 材 质 给 人 的 主观 感受 是 不 同 的 ， 比 如 晶体 的 通 透 感 ， 往 往 会 有 比 
较 高 亮 的 透 光 。 石 头 的 粗糙 感 ， 会 出 现 很 多 颗粒 的 感觉 和 坑坑洼洼 的 感 党 。 金 属 的 坚 便 感 ， 
会 出 现 锋利 的 转折 面 ， 强 烈 的 高 光 等 。 这 需要 我 们 通过 大 量 观察 并 总 结 才能 将 物体 的 材质 做 
到 真实 。 

@) 添加 新 的 光源 ， 比 如 背光 ， 环 境 光 等 。 背 光 可 以 让 整个 画面 色彩 更 加 丰富 ， 巧 妙 地 
利用 冷暖 关系 选择 背光 的 颜色 还 能 进一步 拉 开 整个 画面 的 空间 效果 。 环 境 光 能 够 更 直观 的 体 
现 不 同 物体 之 间 的 联系 。 

(@) 添加 一 些小 细节 ， 比 如 刻 痕 ， 斑 点 之 类 的 ， 不 仅 能 够 丰富 画面 ， 在 适当 的 位 置 添加 
还 可 以 起 到 下 密 有 致 的 效果 ， 也 能 提升 整体 的 质感 。 

@ 适当 的 添加 一 些 魔法 效果 或 者 光 效 。 刻 男 细节 添加 背景 光 ， 调 整 大 的 明暗 、 色 彩 的 
变化 、 强 化 材质 等 〈 网 8-19 )。 


图 8-19 


3， 石头 案例 
石头 的 绘制 相对 人 简单， 对 造型 要 求 不 会 太 遇 ， 只 要 注意 外 形 好 看 束 行 。 它 的 明暗 关系 比 
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一 一 视觉 营造 的 风向 标 
较 好 理解 ， 比 较 适 合 新 人 练习 上 色 。 

QD 草图 阶段 构思 出 想 要 的 造型 ， 可 以 不 用 在 意 细 枝 术 节 的 地 方 ， 只 要 大 的 剪影 关系 舒 
服 就 行 〈 图 8-20)。 

@ 把 绘制 好 的 造型 进一步 的 确定 ， 给 出 更 多 的 细节 与 块 面 的 转折 〈 图 8-21 )。 


8—20 8—21 


(3) 选择 一 个 固有 色 把 石头 的 整个 英 面 铺 上 《图 8-22)。 
由 根据 腕 灰暗 关系 与 块 面 的 转 扩 铺 出 石 尖 的 体积 感 (图 8-23 )。 


22 8—23 


@) 增加 一 些 细节 强化 石头 的 材质 与 精细 程度 〈 图 8-24)。 
(6) 增加 一 些 光 效 ， 添 加 背景 光 与 环 境 光 (图 8-25 )。 


8—24 8—25 
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结语 :作为 原画 设计 者 ， 需 要 不 断 磨 练 自己 的 手绘 能 力 ， 只 有 把 基础 夯实 才能 让 之 后 的 

路 走 得 更 加 平稳 。 其 中 最 大 的 乐趣 就 是 将 脑海 中 存在 的 一 丝 丝 想象 ， 一 点 点 ， 一 步 步 地 完 

善 ， 最 终 在 一 张 白 纸 上 完美 呈现 出 来 。 这 个 过 程 中 的 喜悦 是 无 可 比拟 的 ， 但 道路 也 走 得 很 艰 

辛 。 这 之 间 有 成 就 感 ， 有 挫败 感 ， 甚 至 会 怀疑 自己 ， 但 又 最 终 会 下 定 决 心 。 所 以 美术 创作 也 
丰富 了 设计 师 的 人 生 经 历 ， 并 呈现 出 一 幅 幅 闪闪 发 光 的 作品 。 
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本 书 主要 给 大 家 介绍 关于 视觉 设计 在 界面 中 的 运用 方式 和 方法 ， 主 要 是 针对 广大 刚刚 入 
行 的 视觉 设计 师 ， 而 提供 的 一 僚 在 团队 协作 中 忌 结 出 的 方法 论 ， 希 望 能 够 切实 的 帮助 到 各 位 
设计 师 以 及 设计 爱好 者 。 

其 实 ， 设 计 本 里 便 是 解决 问题 的 过 程 ， 所 以 在 学 习 和 从 事 设 计 相 关 装 位 的 时 候 ， 最 重要 
的 还 是 要 通过 不 断 的 学 习 与 工作 去 总 结 ， 去 思考 ， 甚 至 去 研究 每 一 个 像素 中 包含 的 颜色 ， 每 
一 个 字体 间距 的 若 客 ， 可 谓 是 “ 失 之 野 厘 ， 关 之 干 里 ”。 目 从 互联 网 诞生 以 来 ， 对 于 互联 网 
的 界面 视觉 设计 其 实 就 是 不 断 地 退 求 像素 级 别 的 完 关 。 细 致 与 规范 是 设计 师 衣 先 要 具备 的 便 
性 条 件 ， 正 是 由 于 规范 性 的 束缚 ， 才 产生 了 界面 视 沉 设计 这 种 独特 的 “ 美 ”。 

思考 和 总 结 ， 忆 是 会 给 人 带 来 意 想 不 到 的 收获 ， 想 做 到 这 一 点 却 实 则 不 易 。 需 要 从 业者 
能 够 更 加 热爱 设计 这 个 行业 ， 能 够 真正 放空 目 己 的 内 心 去 设计 。 我 在 团队 中 经 常会 听 到 的 一 
句 话 那 束 是 “ 戒 骄 戒 躁 *"， 只 有 更 加 专注 才能 够 衣 下 内 心 去 思考 问题 ， 对 于 设计 更 是 如 此 。 
设计 是 无 形 的 ， 其 实 设计 也 是 有 形 的 ， 那 么 这 个 过 程 只 有 经 过 反复 的 答 试 与 思考 之 后 才能 发 
现 其 变化 的 芮 诺 ， 这 也 是 设计 最 迷人 ， 最 值得 考究 的 地 方 。 

真正 的 设计 与 创新 ， 并 不 仅仅 是 一 个 看 似 “ 从 无 到 有 ”的 过 程 。 更 多 时 候 ， 是 靠 设 计 师 
的 思考 与 不 断 的 探 完 ， 一 步 一 个 脚印 ， 从 抽象 到 具 农 ， 从 量变 到 质变 的 过 程 。 

设计 更 多 是 从 一 个 恰 逢 其 时 的 “idea” 到 最 终 的 产品 能 够 沙 地 ， 征 一 个 把 从 抽象 的 ， 无 
形 的 想法 通过 各 种 科学 的 方法 论 以 及 设计 思维 将 其 一 步 一 步 的 具象 化 、 可 视 化 ， 惑 合 UI 设 
计 为 例 ， 突 破 其 表面 的 视觉 界面 ， 其 背后 是 靠 痢 对 于 用 户 的 不 断 研究 ， 对 于 需求 与 痛 点 不 断 
满足 而 文 撑 的 。 服 务 与 用 户 才 是 其 产品 最 终 的 灵魂 ， 即 使 是 作为 一 名 视 沉 设计 师 ， 也 因 该 明 
日 这 个 道理 ， 视 觉 设计 只 是 用 户 需 求 和 产品 特点 最 终 的 呈现 效 末 ， 是 整个 设计 流程 中 最 表象 
的 一 个 环 市 。 

国内 很 多 的 设计 从 业者 进 到 UI 设计 这 个 行业 ,单单 是 以 视觉 设计 为 跳板 来 完成 入 行 ， 
甚至 会 单纯 地 认为 设计 其 实 惑 是 把 图 做 好 这 么 简单 。 出 现 这 样 的 问题 其 实 还 是 源 于 目 己 对 于 
所 从 事 行业 的 思考 不 够 深入 ， 在 进入 瓶颈 期 时 也 无 法 给 予 目 己 一 个 正确 的 解决 方法 ， 而 这 种 
现象 是 现在 国内 设计 行业 普 衣 存在 的 问题 。 缺 乏 思 考 与 深入 的 技术 挖掘 ， 是 造成 现在 设计 行 
业 如 此 浮躁 的 重要 原因 之 一 ， 也 极 大 的 降低 了 设计 从 业 的 行业 门槛 ， 这 是 我 们 所 最 不 愿意 看 
到 的 。 

对 于 任何 行业 ， 对 于 资深 从 业者 的 需求 从 未 停止 过 ， 设 计 亦 然 。 所 以 ， 和 希望 各 位 设计 从 
业者 能 够 更 加 专注 于 设计 本 号 ， 去 除 杂 仿 ， 多 去 思考 和 探 完 每 一 个 值得 思考 的 问题 、 细 市 、 
线条 、 文 字 、 配 色 的 表现 方式 以 及 其 背后 目的 。 当 过 到 普 贷 和 挫折 时 ， 间 问 上 自己 当 时 为 什么 
选择 ， 即 所 谓 的 “不 瑟 初 心 ?， 才 可 “ 方 得 始终 ”。 

互联 网 的 及 展 从 之 前 的 传统 互联 网 ， 再 到 现在 的 移动 互联 ， 在 未 来 其 至 会 及 展 为 以 
虚拟 拉 术 为 主导 的 互联 网 承载 方式 ， 每 一 个 时 代 的 到 来 部 会 成 就 一 批 “新 事物 ”而 淘汰 
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过 时 的 。 

所 以 ， 作 为 一 名 互联 网 的 从 业者 ， 不 管 是 身 处 什么 职位 ， 什 么 角色 ， 不 进步 就 意味 淘 
汰 。 对 于 设计 师 来 讲 ， 同 样 如 此 ， 需 要 让 自己 在 技能 的 广度 和 深度 上 同时 发 据 ， 成 为 一 名 全 
栈 的 “T” 字 型 人 才 ， 这 也 是 本 书 想 要 传达 的 意图 ， 

我 们 所 身 处 的 世界 和 周围 事物 本 就 是 一 个 充满 矛盾 的 环境 ， 说 到 设计 本 身 ， 也 是 一 个 明 
显 的 “ 悖 论 ” 需要 设计 师 在 各 种 所 谓 的 “束缚 ”中 寻求 最 优 的 结果 ， 对 于 产品 ， 需 要 在 用 
户 需求 、 功 能 表现 、 视 觉 效果 以 及 开发 成 本 之 间 寻 求 平 衡 点 ， 对 于 界面 ， 设 计 师 也 要 去 平衡 
规范 性 与 艺术 表现 ， 说 得 再 细 一 些 ， 文 字 的 大 与 小 ， 线 条 的 粗 与 细 ， 图 片 的 明 与 暗 都 是 每 一 
位 视觉 设计 师 需要 平衡 的 设计 元 素 。 设 计 师 本 身 就 需要 游 走 于 这 些 矛盾 体 之 间 ， 并 且 不 断 地 
思考 与 总 结 ， 而 这 也 正 是 衡量 一 个 设计 师 价值 的 核心 

我 们 正 处 于 设计 最 好 的 时 代 ， 应 该 感谢 移动 互联 ， 在 优化 生活 方式 的 同时 ， 也 将 “人 ? 
与 “需求 ”的 高 度 更 加 提升 。 在 移动 互联 的 时 代 ,“ 人 性 ”得 到 了 空前 的 满足 与 尊重 ， 也 给 
予 互联 网 从 业者 更 多 的 机 会 与 挑战 。 感 谢 现 有 的 团队 ， 是 设计 让 我 们 凝聚 在 一 起 ， 也 是 设计 
让 我 们 能 够 在 享受 快乐 与 挑战 的 同时 ， 沉 淀 下 来 这 份 收获 分 享 给 更 多 的 喜爱 设计 的 人 ， 这 也 
正 是 迎合 了 互联 网 最 本 质 的 含义 ， 那 就 是 “分 享 ” 

最 后 ， 我 愿 与 每 一 位 移动 互联 的 从 业者 能 够 并 肩 前 行 ， 不 断 的 锤炼 自我 。 在 共同 见证 移 
动 互联 发 展 的 同时 ， 也 能 够 一 同 为 移动 互联 设计 继续 贡献 自己 的 力量 。 

只 因 一 句 “ 但 行 好 事 ， 莫 问 前 程 ” 


于 山西 太原 
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”做 滋 闻 香 村 背 妥 公司 
2 ”LAINIGOUETECPNOLOGY 


”和 章 芷 视 黎 口 宇 


优 逸 客 科技 有 限 公 司 ,简称 “优选 客 ”， 被 教育 部 授 
予 “ 三 网 融合 人 才 培 养 中 心 ” 称 号 ;是 Adobe 公 司 中 国 
大 区 战略 合作 伙伴 ; 是 国内 互联 设计 与 前 端 开发 实 训 行 业 
的 “拓荒 者 ”; 是 企业 级 产品 设计 “方案 提供 商 ”; 是 
中 国 UI 职业 教育 的 “知名 品牌 ”。 

成 立 4 年 来 ， 优 和 逸 客 已 先后 在 山西 和 陕西 等 地 区 建立 
了 互联 网 人 才 职 业 实 训 基地 ， 合 作 企业 已 达 2000 余 家 ， 
合作 院 校 达到 80 余 家 ;已 为 我 国 培养 出 5000 余 名 互联 网 高 
端 技术 人 才 ， 遍 及 全 国 30 多 个 城市 。 未 来 ， 我 们 将 继续 
秉承 “专注 、 极 致 、 口 碑 ” 的 文化 理念 ， 逐 步 成 长 为 国内 
一 流 的 互联 网 人 才 实 训 基 地 。 

优选 客 专 注 于 UX 设计 和 UI 设计 ， 同 时 开设 Web 前 端 
布局 、 全 栈 开 发 、PHP 技术 以 及 大 数据 、 云 计算 和 人 工 
智能 技术 等 互联 网 热门 岗位 的 人 才 培 养 课 程 。 优 逸 客 所 
有 实 训 课程 均 由 来 自 北京 、 上 海 等 一 线 城市 的 设计 精英 
与 UI 专家 深入 企业 调研 并 结合 企业 对 人 才 实 际 需求 专业 
定制 ， 秉 承 岗 位 驱动 ， 就 业 先 行 的 原则 ， 力 争 使 每 一 位 
学 员 都 获得 一 份 满意 的 工作 。 


山西 总 部 山西 省 太原 市 高 新 区 学 府 街 平阳 路 口 凯 通 大 厦 二 层 
电话 : 0351-7324758 网 址 : www.sxuek.com 


西安 分 部 ”陕西 省 西安 市 外 事 学 院 南 校区 电信 缴费 大 厅 二 层 
陕西 省 西安 市 清华 科技 园 A 座 C301 
电话 400 969 7660 “网 址 : www.uekedu.com 


优 逸 客 山西 微 信 二 维 码 


企业 文化 : 专注 、 极 致 、 口 碑 

企业 理念 ， 有 责任 有 激情 有 梦想 

企业 愿景 .让 每 一 位 优选 客 的 学 员 都 有 份 满 意 的 工作 
我 们 的 目标 ， 成 为 中 国 专业 的 大 学 生 职 业 技能 实 训 机 构 


TEL.400-969-7660 
太原 市 学 府 街 平阳 路 学 府 街 口 凯 通 大 厦 2 层 


移动 界面 设计 在 线 互动 交流 平台 


Mobile Interface Design 官方 微 博 : http://weibo.com/cmpijsj 
豆 准 网 : http://site.douban.com/139085/ 


读者 信箱 : cmp_itbook@163.com 
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/ 内 容 简介 


本 书 主要 针对 当前 移动 互联 网 行业 对 于 界面 设计 所 提出 的 新 要 求 提供 学 习 和 解决 方案 。 从 移动 互联 网 行业 出 发 ， 
体现 了 当前 以 移动 互联 为 主 的 行业 特点 以 及 用 户 在 整个 产品 设计 与 研发 过 程 中 所 起 到 的 重要 作用 ， 在 基于 交互 以 及 
产品 可 用 性 原则 的 基础 上 ， 为 各 位 读者 着 重 介绍 了 在 移动 互联 影响 下 进行 界面 视觉 设计 的 具体 营造 和 表现 方式 。 
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